Programación en HTML

Profesional
Programacin en HTML, 1 Parte

NDICE DEL CURSO
Fundamentos: crear el primer archivo HTML Cmo disear y dar formato a los textos Para principiantes Listas, barras y vnculos Insertar imgenes Distintos formatos de escritura Divisin de pginas con tablas Para Insertar y dimensionar marcos expertos Ejemplo de formulario Qu son y para qu sirven los identificadores Conceptos bsicos del estilo en cascada Para profesionales HTML con Java Probando las pginas HTML Principios legales de las pginas de Internet N N N N N N N N N N N N N 35 37 39 41 43 45 47 49 51 53 55 57 59
SUMARIO
Qu es el HTML? As funciona el HTML Mi primer documento HTML Ver mi primera pgina HTML Los navegadores ms importantes 66
66
67 68 68
plorer de Microsoft y seguir los pasos siguientes:
Inicia el navegador haciendo click en , y . Tambin se puede acceder directamente haciendo doble click sobre el icono:
Foto: Super Stock. Montaje: Computer Hoy.
que normalmente estar en el escritorio 05 (Pg. 68) .
La palabra Web significa en ingls tela de araa y se utiliza por su similitud con la estructura de las pginas de Internet. Nosotros no nos vamos a convertir en el hombre araa pero vamos a aprender a crear nuestra propia pgina Web.
Una vez dentro del navegador haz click en cualquier parte de la barra , de forma que la direccin actual quede seleccionada en azul: . A continuacin escribe la direccin y pulsa la tecla $ . Tendrs que esperar unos instantes hasta que aparezca la pgina principal de Yahoo Espaa:
a mayora de las pginas Web que visitamos en la red Internet pertenecen a las empresas, que utilizan este medio para vender o promocionar sus productos y servicios. Pero Internet es un medio que puede ser utilizado por todos. Dominando el lenguaje HTML 01 se pueden crear pginas Web propias y publicarlas en Internet. El HTML es el lenguaje que se utiliza en las pginas Web y debe ser interpretado por los navegadores 02 para mostrar los
64
textos y las imgenes contenidos en las pginas. Aprender el lenguaje HTML no es demasiado difcil. En Computer Hoy hemos dividido este curso en trece captulos donde explicaremos paso a paso todas las herramientas necesarias para disear atractivas pginas de inicio 03 . En esta primera entrega del curso vamos a crear un pequeo archivo HTML que cargaremos con el navegador. As aprenderemos a introducir los textos e imge-
nes de nuestra pgina. Poco a poco aprenderemos a dar formato a los elementos y complicaremos las cosas con hipervnculos 04 , tablas y formularios.
Qu es HTML?
La abreviatura HTML significa Hypertext Markup Language, traducido al castellano Lenguaje para crear hipertextos. Con el lenguaje HTML se puede dar formato al texto de las pginas Web y lo ms importante, permite interrelacioN 35
nar unas pginas con otras utilizando hipervnculos para navegar a travs de la informacin y saltar de pgina en pgina para localidar la informacin deseada.
As es el HTML
El texto HTML que se oculta detrs de una pgina Web se puede ver sin ms. Para echar tu primer vistazo al cdigo HTML de una pgina Web de Internet puedes utilizar el navegador Ex-

Si quieres ver el texto HTML que se esconde detrs de esta pgina tendrs que hacer click sobre y . Aparecer una ventana con mucho texto:
Profesional
Qu es...?
01
Que se necesita?
Para programar en HTML tan slo necesitas un ordenador con Windows 95 98 y un navegador para ver las pginas. El Internet Explorer que viene con Windows 95 y 98 puede servirnos perfectamente. Tambin necesitas el programa Bloc de notas que viene con Windows 95 y 98. Para iniciarlo tienes que hacer click sobre , , y . A continuacin vers la ventana del editor
Con estas lneas estamos dando un ttulo a nuestra pgina. Este ttulo ser el que aparece en la barra superior de la ventana del navegador cada vez que se muestre la pgina:
HTML
4 5
Para terminar tu primer archivo HTML escribe en la ltima fila. El cdigo completo debe ser:
Escribe la cuarta, quinta y sexta filas:
Haciendo click en las opciones y aparece la ventana: Para guardar el texto en la carpeta puedes seguir con el paso 7 . Si quieres guardarlo en otro sitio haz click en: y elige la ruta deseada.
6
No olvides pulsar la tecla $ despus de cada una de ellas. Con este paso hemos conseguido introducir el
A primera vista, lo que ms llama la atencin de este texto son las palabras que se encuentran entre y Estos elementos son identificadores 06 (Pg. 68) que permiten dar formato al texto. Por ejemplo: el identificador hace que el texto que se escriba a continuacin aparezca en negrita. No te preocupes si no entiendes nada de lo que pone. Cuando hayas terminado con todos los captulos del curso podrs descifrar sin problemas este texto HTML.
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. En l se definen las imgenes, los textos y los hipervnculos que tendr la pgina. En el HTML se permite la utilizacin de dos formatos de imagen: el GIF y el JPEG. En algunas variaciones de este lenguaje se han incluido otros formatos grficos como el PNG. Tambin permite la introduccin de otros contenidos como vdeo y sonido.
02
Navegadores
que utilizars para escribir tu primer ejemplo.
Nuestro primer documento
Escribe en la primera fila y pulsa la tecla $ . Introduce las tres lneas de texto texto que en la pgina Web que tendr el aspecto cuando sea mostrada en el navegador.
Cierra el Bloc de notas y el Internet Explorer haciendo click sobre .
Estos programas permiten visualizar el contenido de las pginas Web de Internet. Tambin se utilizan para descargar ficheros o visualizar contenidos multimedia. En la actualidad los navegadores ms utilizados son el Explorer de Microsoft y el Navigator de Netscape. El sistema operativo Windows 98 incorpora el navegador de Internet como uno de los accesorios bsicos del sistema.
03
pulsando la tecla $ al final de cada una.
Pgina de Inicio
Editores HTML
problema hay que conocer el lenguaje HTML y optimizar las instrucciones de las pginas manualmente. En Computer Hoy hemos preferido centrarnos en el diseo de pginas con un editor de texto normal. Esto te permitir aprender la sintaxis y funcionamiento de este lenguaje y crear pginas mucho ms eficientes. Si despus de este curso dominas el HTML, podrs utilizar cualquier editor sin problemas. Adems, tendrs una gran ventaja: dispondrs de amplios conocimientos sobre el lenguaje HTML. Esto te permitir optimizar el funcionamiento de tu pginas introduciendo parte de cdigo manualmente.
No es programacin
adecuado para mostrar diferentes tipos de contenidos de texto e imgenes. La idea bsica de funcionamiento de este lenguaje comenz a surgir a principios de la era de la informtica. En esa poca se estaba empezando a procesar textos con ordenadores y todava no exista nada que se pareciera a WYSIWYG 10 (Pg. 70) . En aquella poca, cuando se quera presentar una palabra determinada en cursiva, se colocaba delante y detrs de la palabra una orden que indicaba a la impresora: escribe el siguiente texto en cursiva. En HTML se sigue el mismo principio de funcionamiento para mostrar los textos.
La forma ms sencilla de crear una pgina Web es utilizar un editor especial de HTML. Este tipo de programas permiten colocar fcilmente los textos e imgenes que se desean presentar en la pgina Web y genera el cdigo HTML automticamente. Pero estos editores tambin tienen sus inconvenientes. Los programas econmicos suelen ser poco eficaces y los ms caros tienen un manejo muy complicado. Adems, muchos de estos editores crean un cdigo HTML poco depurado. En muchos casos se repiten instrucciones que no sirven para nada y ralentizan el funcionamineto de la pgina. Para solucionar este
Aunque escuches una y otra vez la frase programar en HTML, el HTML no es un lenguaje de programacin. En HTML no se pueden crear Bucles 07(Pg. 68) ni evaluar las condiciones 08 (Pg. 68) de las variables 09 (Pg. 70) . Al HTML tambin le falta otra caracterstica: no permite evaluar los datos introducidos por el usuario. En HTML slo se pueden insertar datos a travs de los campos de un formulario. Pero la evaluacin de esta informacin se debe realizar posteriormente con un programa adicional. La realidad es que el HTML es un lenguaje para presentar textos. Su estructura es sencilla y resulta muy
N 35
Tambin llamada Home o Homepage. La presentacin de personas o empresas en Internet consiste en varias pginas conectadas entre s. La pgina de inicio es la principal y la que da acceso a las dems.
04
Hipervnculos
Tambin se conocen como enlaces. Son referencias entre varias pginas que se encuentran en la red Internet. Se suelen distinguir por tener un color distinto al resto del texto, estar subrayados o representados por una imagen. Al hacer click sobre ellos, el navegador carga la pgina correspondiente. Los hipervnculos permiten que el usuario seleccione la informacin que desea visualizar.
65
Profesional
Qu es...?
05
Escritorio
Es la superficie de trabajo de Windows 95 y 98. En ella podemos dejar todo tipo de ficheros y aplicaciones para que estn accesibles en cualquier momento. En el escritorio se encuentran los iconos ms importantes del sistema como el de Mi PC, la Papelera de reciclaje o Mis documentos. El escritorio se puede personalizar a nuestro gusto con colores, grficos o incluso sonidos y animaciones. Tambin puede ser configurado para verse como si fuese una pgina Web.
06
Sobreescribe el nombre de archivo con . Si no aparece sobre fondo azul, haz click con en botn izquierdo en la parte derecha, junto a la o y sin soltar el botn, desplaza el puntero hacia la izquierda hasta que toda la palabra aparezca seleccionada sobre fondo azul .Y escribe el nombre del archivo . Para guardar el documento tienes que pulsar sobre el botn . La extensin 11 (Pg. 70) del archivo puede ser htm o html indistintamente. Cierra el editor haciendo click en .
Haz click en y en para ver de nuevo el texto HTML de la pgina:
Primero haz click sobre la pestaa .
Haz click en en la casilla aparecer el
y nombre .
Haz click en la carpeta
Haciendo click en y
8 1
Identificador
El lenguaje HTML se escribe utilizando identificadores. Los identificadores son rdenes que damos al navegador para que muestre la pgina Web tal y como deseamos. Cada identificador es una orden y pueden indicar atributos del texto, posicin de imgenes, hipervnculos o cualquier otra propiedad de la pgina.
07
Ver nuestra primera pgina HTML

Para ver tu primera pgina HTML tendrs que iniciar el navegador repitiendo el paso 1 del apartado As es el HTML que se encuentra en la pgina anterior. Haz click en las opciones y .
Si no consigues ver esta carpeta haz click en las flechas hasta que puedas verlo.
podrs visualizar el archivo en el navegador:
Ahora podrs ver el contenido de la carpeta Se trata de una pgina muy sencilla. Pero en los prximos captulos tus pginas irn tomando ms colorido.
Bucles
En programacin se entiende por bucle una secuencia de instrucciones que se repite varias veces. Pero las instrucciones slo se introducen una vez en el cdigo de programa. El nmero de repeticiones depende del valor de una variable que se llama contador. Cada vez que se ejecuta el cdigo, el contador aumenta su valor hasta alcanzar un valor determinado en el que se detiene el bucle.
08
2 3
En el siguiente cuadro de dilogo 12 (Pg. 70) tendrs que pulsar el botn. Entonces aparecer una ventana de dilogo en la que debes seleccionar la carpeta donde se encuentra el archivo.
Si se compara el texto HTML con la pgina Web, nos damos cuenta que los nicos elementos que se repiten en ambos sitios son: y . quiere decir que el texto que aparece a continuacin es una pgina Web. y significan cabeza y cuerpo. Con ellos se divide el cdigo HTML en dos partes: la cabeza o cabecera es la primera parte del texto HTML y se utiliza para definir algunos valores que se refieren a toda la pgina. Por ejemplo, en la seccin se puede definir el ttulo de la pgina para que posteriormente este aparezca en la barra superior del navegador. En la seccin se suelen introducir los textos y las imgenes que se mostrarn en el navegador. Si te fijas un poco en el texto HTML te dars cuenta de que todas las expresiones que se encuentran entre parntesis de flecha aparecen por duplicado.
Navegadores para disear HTML

ternet (Por ejemplo: Alehop, PoAdems, debes procurar tener bladores y CTV) que han sido insiempre instalada en tu ordesertados en Computer Hoy innador la versin ms actual del cluan estos programas. Si editas navegador. Internet Explorer en HTML lo ideal es disponer de tiene ahora mismo la versin 5 ambos navegadores, ya que, y Netscape Comunicator la 4.6. aunque el HTML es estndar, los navegadores tienen algunas diferencias en sus instrucciones. Algunos identificadores pueden ser irreconocibles por el navegador. Tambin se puede dar el caso de distintas interpretaciones para la misma El navegador Netscape Comunicator se puede obtener gratis en la red. orden.
Condiciones
En programacin se utilizan mucho las condiciones para tomar decisiones en el flujo de programa. Por ejemplo: si el usuario pulsa el botn x entonces se cierra la ventana activa y si pulsa el botn z, se abre una nueva ventana con ms opciones que se pueden seleccionar.
Quin desee escribir documentos HTML necesita un navegador para comprobar el resultado de sus trabajos. Los El navegador Internet Explorer viene innavegadores ms tegrado en Windows 95 y 98. Netscape Comunicator tambin utilizados son el Microsoft Inest disponible de forma graternet Explorer y el Netscape tuita. Para encontrarlo tienes Comunicator. El Explorer viene que acceder a Internet y visitar incluido en el sistema operatila pgina - donde tambin vo Windows 95 y 98. Tambin tienes que visitar la zona de se puede descargar gratuitadescarga. Estos navegadores mente desde Internet para instambin se encuentran dispotalar la ltima versin en el ornibles en numerosos CD-ROM denador. Basta con visitar la que vienen con las revistas. direccin -v y acceder al rea de descarga. El navegador Los CDs de proveedores de InN 35
66
Experto
Qu es...?
09

Primero aparece y despus . Con pasa lo mismo y aparece . A estos identificadores que van precedidos de una lnea oblicua se les llama identificadores de cierre. Gracias a esta metodologa podemos dividir el documento HTML en varias secciones independientes y todos los elementos que estn entre dos identificadores del mismo tipo estarn relacionados. Por ejemplo: todo lo que se encuentre entre los identificadores y es el ttulo de la pgina. En HTML todas las funciones tienen un identificador de inicio y otro de cierre que permiten indicar al ordenador donde empieza y donde acaba una determinada funcin. Si has terminado de visualizar tu primer documento HTML, cierra las ventanas del navegador y block de notas haciendo click sobre sus .
Variables
En programacin, las variables son unos elementos que se utilizan para contener datos de distintos tipos: nmeros, letras, palabras, textos, valores lgicos, etctera. El valor contenido en una variable puede cambiar a lo largo de la ejecucin de un programa. Existen otros elementos llamados constantes que tienen un valor fijo que no se puede cambiar durante toda la ejecucin del programa.
10
Ahora ya puedes ver tu archivo Haz click sobre l de forma que en el campo nombre
Guarda el archivo haciendo click en y en . Para comprobar el cambio, repite los pasos 1 a 7 del apartado Ver nuestra primera pgina HTML. El navegador nos mostrar los cambios
haciendo click en y
, .
10
Haz click en cualquier posicin de la lnea de direccin: , de manera que aparezca seleccionada sobre fondo azul: . Ahora debes escribir la ruta donde se encuentra el archivo. En nuestro caso tendras que escribir: La unidad del disco duro , el nombre de la carpeta y el nombre del archivo . Despus de escribir la ruta completa: tendrs que pulsar la tecla $ y tu archivo HTML se cargar.
aparezca el nombre de tu pgina: .
WYSIWYG
Es la abreviatura de la frase en ingls what you see is what you get, en castellano: Lo que hay es lo que ves. En informtica se utiliza para indicar que lo que aparece en pantalla es lo mismo que saldr por la impresora. Esta tecnologa es relativamente reciente y se emplea en la mayora de programas editores de textos y diseo grfico que se utilizan en la actualidad.
11
5 6 7 8
Para abrir el archivo haz click en . Haz click justo detrs de
11
Escribe y pulsa la tecla $ . Este identificador dice al navegador que debe saltar a la siguiente lnea antes de mostrar el texto siguiente. Despus de esta accin aparecer otra lnea en blanco En esta lnea puedes escribir la frase siguiente Despus de introducir el
Para cerrar el navegador Internet Explorer puedes pulsar sobre .
Ms texto para nuestra pgina

Antes de pasar a otros captulos de este curso puedes ampliar un poco el contenido de la pgina que hemos creado.
Cargar la pgina rpidamente

Si sabes en que carpeta se encuentra el archivo HTML puedes abreviar el proceso de carga ahorrndote los pasos donde seleccionas la carpeta del archivo.
Cuando termines de visualizar la pgina cierra el navegador pulsando . En los prximos captulos del curso aprenders las ordenes HTML que permiten estructurar el texto.
Direcciones online
Extensin
Todos los archivos tienen un nombre que indica su contenido y lo diferencia de los dems. A continuacin tienen una coletilla de tres letras que indica su tipo. La extensin de un archivo, son estas tres ltimas letras. Por ejemplo, las terminaciones: .txt (archivo de texto), .bat (archivo de proceso por lotes, .exe y .com (archivos ejecutables), .doc (documento de texto, normalmente Word). Estas terminaciones son utilizadas por el usuario y por el sistema operativo para averiguar rpidamente cul es el tipo de archivo.
12
Abre el editor de textos haciendo click en , , y .
Inicia el navegador Microsoft Internet Explorer
v www.microsoft.com www.netscape.com
Haz click en y . Aparecer la ventana de dilogo:
Lo ms importante
CABEZA Y CUERPO: cada documento HTML se compone de cuerpo y cabeza. Los identificadores de cuerpo son y Los identificadores de cabeza son y . En la cabeza aparecen informaciones bsicas sobre el documento. En el cuerpo aparecen los textos y las imgenes que se presentan en el navegador. SALTO DE LNEA: el identificador indica al navegador que tiene que saltar una lnea y posteriormente continuar con la presentacin de texto o imgenes. El identificador no necesita un identificador de cierre.
Al final de cada captulo te repetimos los conceptos ms importantes: HTML: es el lenguaje de las pginas Web. Indica al navegador como se debe presentar el texto y las imgenes de la pgina. Existen muchos programas que generan cdigo HTML automticamente. Pero generan pginas que no suelen estar optimizadas.
Cuadro de dilogo
Son ventanas de Windows que muestran un mensaje donde se solicita una respuesta del usuario para una determinada situacin.
De momento no podrs ver tu archivo, ya que el editor slo muestra los archivos con extensin .txt.
texto la ventana del editor tendr este aspecto
Haciendo click en el botn
se desplegar la lista donde debemos seleccionar la entrada

N 35
IDENTIFICADOR: es una instruccin en HTML. Se reconoce por los parntesis de flecha y . Casi todos los identificadores tienen un identificador de cierre que comienza con una lnea oblicua. Por ejemplo: y .
68
Profesional
Programacin en HTML, 2a Parte

Disear una plantilla de trabajo Proteccin de la plantilla Salto de lnea Trabajar con prrafos Abrir archivos HTML rpidamente 74
75
75 78 78
Lo primero que debe aprender un diseador de pginas web es a organizar el texto. En Computer Hoy te lo vamos a explicar muy claro, para que tus pginas se conviertan en autnticas obras de arte.
n la primera entrega del curso de creacin de pginas Web con HTML 01 aprendimos los principios bsicos de este lenguaje y creamos nuestra primera pgina web. Para comprobar el resultado de nuestros ejercicios, tuvimos que recurrir a la utilizacin de un navegador 02 . En esta segunda entrega aprenderemos algunas instrucciones que nos permitirn dar un formato ms atractivo a nuestros textos. Hemos recibido una abalancha de cartas, emails y faxes en los que nos pediais que este curso apareciera en todos los nmeros. Por eso, a partir de esta entrega el curso se publicar en todos los nmeros.
74
Disear una plantilla de trabajo

Los que utilizamos HTML para crear nuestras pginas Web sabemos que la mayora de nuestras pginas tienen una estructura muy similar. Por esta razn,normalmente creamos una plantilla en la que se incluyen todos los comandos comunes a nuestras pginas. Si sigues los pasos que te indicamos a continuacin, obtendrs una plantilla que te servir de estructura bsica para todos los documentos HTML que creemos en los prximos captulos del curso. Esto nos permitir no tener que introducir las mismas lneas cada vez que creamos una pgina.
Inicia el editor haciendo click sucesivamente en: , , y . Haz click en cualquier parte del rea blanca de la ventana del editor .
Fundamentos: crear el primer archivo HTML Cmo disear y dar formato a los textos Para principiantes Listas, barras y vnculos Insertar imgenes Distintos formatos de escritura Divisin de pginas con tablas Para Insertar y dimensionar marcos expertos Ejemplo de formulario Qu son y para qu sirven los identificadores Conceptos bsicos del estilo en cascada Para profesionales HTML con Java Probando las pginas HTML Principios legales de las pginas de Internet
N N N N N N N N N N N N N
35 37 38 39 40 41 42 43 44 45 46 47 48
Debido a la avalancha de cartas de los lectores hemos decidido modificar la programacin del curso HTML. A partir de este nmero publicaremos una entrega cada 15 das.
del documento. Este identificador sirve para indicar al navegador que todo lo que viene a continuacin es cdigo HTML.
ejemplo o cualquier otro texto que posteriormente aparecer en la barra de ttulo 03 de la ventana del navegador.
En la primera lnea de texto tendrs que escribir
Escribe y pulsa la tecla $ . Despus escribe y vuelve a pulsar la tecla $ . Estos identificadores confirman que a continuacin viene el texto de cabecera y el ttulo de la pgina. Ahora puedes escribir algo que te permita recordar que debes escribir el texto de esta seccin. Por
Pulsa la tecla $ y escribe .
y pulsar la tecla $ . El cursor se situar en la segunda lnea
No olvides pulsar la tecla $ al final de cada lnea. Las dos primeras lneas que hemos escrito cierran las secciones de cabecera y ttulo de la pgina. La lnea indica el comienzo del texto. Si quieres repasar
N 37
Foto: PICTOR uniphoto. Montaje: Computer Hoy.

las secciones de las pginas HTML puedes consultar el primer captulo de este curso, que apareci en la pgina 64 del nmero 35 de Computer Hoy. Si el nombre de archivo Sin ttulo aparece sobre fondo blanco debes seleccionarlo haciendo click a la derecha . Mantn pulsado el botn izquierdo del ratn y desplaza el puntero hacia la izquierda hasta que la palabra se vuelva azul:
Profesional
Proteccin de la plantilla
La plantilla que acabamos de crear nos puede resultar muy til. Pero es muy importante que se mantenga intacta y no se borre. Para conseguir esto, lo mejor es proteger contra escritura el archivo de la plantilla.
4 5
Para activar la opcin de proteccin contra escritura del archivo haz click sobre la casilla .
01
HTML
Puedes rellenar la siguiente lnea con para recordar que en esta seccin debes escribir el texto de la pgina. Posteriormente tendrs que sustituir este texto por el texto real de la pgina.
Haz doble click sobre el icono
Para completar las lneas de la plantilla tienes que introducir las lneas: El contenido de la ventana del editor tendr que tener el siguiente aspecto: .
10
plo:
Introduce un nombre de archivo. Por ejem-
que se encuentra en el Escritorio 05 (Pg 76) .
Cierra la ventana haciendo click en el botn . Si quieres desactivar la proteccin, repite los pasos del 1 al 4 y haz click en la casilla para que desaparezca la marca de seleccin .Despus,haz click sobre el botn para guardar los cambios realizados sobre el archivo.
En la siguiente ventana tendrs que hacer click con el botn derecho sobre el icono .
Por ltimo, cierra la ventana con un click sobre .
Salto de lnea
En la primera entrega de este curso, te explicamos el funcionamiento del identificador . En esta ocasin vamos a profundizar un poco ms sobre el funcionamiento de este comando que se utiliza para provocar un salto de lnea. Los pasos que te indicamos a continuacin te permitirn aprender a insertar lneas con el comando :
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. En l se definen las imgenes, los textos y los hipervnculos que estarn incluidos en la pgina. En HTML se permite la utilizacin de dos formatos de imagen: el GIF y el JPEG. En algunas variaciones de este lenguaje se han incluido otros formatos grficos como el PNG. Tambin permite la introduccin de otros contenidos como vdeo, sonido o incluso programas que se ejecutan en nuestro ordenador al abrir la pgina.
02
Navegador
11 9
Para guardar la plantilla haz click en y en . Aparecer un cuadro de dilogo 04 (Pg. 76) donde se indica el nombre del archivo .
Haz click en el botn . El editor guardar la plantilla en la carpeta Mis documentos. Si deseas guardar la plantilla en otra carpeta, tendrs que hacer click sobre y seleccionar una unidad de disco.Posteriormente podrs acceder a la carpeta deseada haciendo click sobre ella. En nuestros ejemplos hemos guardado todos los archivos en la carpeta Mis documentos.
Aparecer un men en el que tienes que seleccionar la opcin .
12
!
Inicia el editor tal y como te indicamos en el paso 1 del apartado Disear una plantilla de trabajo. Para comenzar a utilizar el comando tendrs que abrir tu plantilla. Haz click sobre las opciones y para abrir el archivo.
Es un programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utilizar para descargar ficheros o visualizar contenidos multimedia. En la actualidad los navegadores ms utilizados son el Explorer de Microsoft y el Navigator de Netscape. El sistema operativo Windows 98 incorpora el navegador de Internet como uno de los accesorios bsicos.
03
Despus de guardar el archivo, cierra el editor haciendo click en el smbolo .
Barra de ttulo
2
pgina web no significa que el navegador vaya a interpretar esta orden. La unica forma de forzar al navegador para que se produzca un salto de lnea es utilizar el comando . El salto de lnea se utiliza con mucha frecuencia cuando se desea ajustar el margen derecho del texto de un documento o cuando se desea dividir el texto en varios prrafos.
Resumen de este captulo

dos una y otra vez. Lo mejor es proteger el archivo de la plantilla contra escritura para evitar que pueda ser sobreescrito accidentalmente. lo mejor es dividir el texto en varios prrafos. Gracias a esto se consigue una mayor fcilidad en la lectura. En el lenguaje HTML los prrafos se generan mediante el comando antes del prrafo deseado y el comando al final de prrafo que se desea definir. Aunque pueden parecer poco tiles, lo mejor es que comiences a familiarizarte inmediatamente con estos formatos de prrafo, ya que los utilizars con mucha frecuencia en los captulos posteriores.
En este apartado se resumen los contenidos ms importantes que han sido tratados en este captulo del curso.
Estructura bsica
Cuando se generan pginas web escribiendo sus instrucciones HTML, lo ms lgico es crear una pgina con los comandos que son comunes a todas las pginas. Esto permite aprovechar este archivo para crear todas las pginas que diseemos, evitando tener que introducir los mismos coman-
El comando <br>
El comando se utiliza para generar un salto de lnea. Si se omite, el navegador slo realizar un salto de lnea cuando sea estrictamente necesario para poder mostrar todo el texto. Hay que tener en cuenta que pulsar la tecla $ en el cdigo fuente 06 (Pg. 76) de la
Los prrafos
Cuando se presentan textos muy largos en una pgina Web,
N 37
Es la barra azul que aparece en la mayora de las ventanas de Windows 95 y 98 en la parte superior. En la parte izquierda aparece el icono correspondiente al programa, seguido del nombre de la aplicacin y el fichero que se encuentra abierto en ese momento. En los navegadores tambin aparece el ttulo de la pgina web que se est visitando en cada momento. En la esquina derecha de la barra encontramos tres iconos que sirven para abrir, cerrar y minimizar la ventana sin tener que recurrir a las opciones del men del programa.
75
Profesional
04
Cuadro de dilogo
En la siguiente ventana de dilogo aparecer el contenido de la carpeta
Son ventanas de Windows que muestran un mensaje donde se solicita una respuesta del usuario para una determinada situacin.
05
, Despus repite el paso 10 y del apartado Disear una plantilla de trabajo pero dando el nombre al archivo y haz click sobre el botn .
12 13
Cierra el editor haciendo click en .
Abre tu navegador y carga el documento. Si no recuerdas cmo se ha-
el cuadro Abrir rpidamente un archivo HTML que se encuentra en la pgina 78. Con esto hemos terminado de disear nuestra pgina de inicio. Ahora puedes
Escritorio
Es la superficie de trabajo de Windows 95 y 98. En ella podemos dejar todo tipo de ficheros y aplicaciones para que estn accesibles en cualquier momento. En el Escritorio se encuentran los iconos ms importantes del sistema como el de Mi PC, la Papelera de reciclaje o Mis documentos. El Escritorio se puede personalizar a nuestro gusto con colores, grficos o incluso sonidos y animaciones. Tambin puede ser configurado para verse como si fuese una pgina Web.
06
Si aparece el contenido de otra carpeta que no sea Mis documentostendrs que hacer click en la pestaa , que se encuentra situada en la parte derecha de . Aparecer una lista en la que tienes que seleccionar la entrada
la lnea moviendo el puntero al final de la palabra texto, y sin soltar el botn del ratn, desplaza el puntero hacia la parte izquierda, hasta que las dos palabras aparezcan resaltadas sobre fondo azul .
Selecciona
8
Si la lista es demasiado larga puedes desplazarte por las opciones con los controles y , que se encuentran a la derecha de la lista hasta que puedas visualizar la carpeta .
Escribe como nuevo texto e introduce un salto de lnea . A continuacin pulsa la tecla $. El resultado debe ser ste: . Puedes seguir escribiendo en la lnea siguiente. Por ejemplo:
ce puedes consultar el apartado Ver nuestra primera pgina HTML que se encuentra en el primer captulo del curso, que se public en el nmero 35 de Computer Hoy. No olvides seleccionar el nombre correcto de archivo. En nuestro ejemplo es . Si quieres acelerar la carga de tu pgina Web puedes leer
distinguir claramente los lugares donde has insertado un . Los tres primeros se corresponden con . Tambin podrs distinguir el efecto del aislado. La ltima lnea se muestra sin saltos a pesar de que en el cdigo fuente se haya pulsado la tecla $ . De este modo puedes comprobar que sin no hay salto de lnea.
Cdigo fuente
Son una serie de instrucciones y comandos de programacin que se utilizan para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin se utiliza por los programadores para referirse al archivo que tiene las instrucciones de un programa.
07
En el cuadro de dilogo aparecern todos los archivos con extensin 07 txt. Para ver tu plantilla HTML, haz click en
Cuando introduzcas un comando de salto de lnea debes pulsar la tecla $ .
10
A continuacin introduce las lneas siguientes: Seguro que te llama la atencin que despus de un nico en una lnea sigan
y selecciona la opcin
14
tres lneas sin utilizar este comando. El cdigo fuente completo debe tener un aspecto similar a este .
Extensin
Todos los archivos tienen un nombre que indica su contenido y lo diferencia de los dems. A continuacin tienen una coletilla de tres letras que indica su tipo. La extensin de un archivo, son estas tres ltimas letras. Por ejemplo, las terminaciones: .txt (archivo de texto), .bat (archivo de proceso por lotes, .exe y .com (archivos ejecutables), .doc (documento de texto, normalmente Word). Estas terminaciones son utilizadas por el usuario y por el sistema operativo para averiguar rpidamente cul es el tipo de archivo.
De esta forma tambin se mostrarn tus archivos HTML .
Si quieres forzar el salto de lnea puede seguir los pasos siguientes. Haz click en , y
15 5
Haz click en el archivo y en el botn para que aparezca el cdigo de nuestra plantilla en la ventana del editor.
Inserta un al final de cada lnea que no lo tenga. Primero haz click detrs de y escribe . Repite este paso en las dos lneas siguientes. El texto debe terminar con un aspecto similar a ste . En este caso, despus de escribir cada lnea no es necesario que pulses la tecla $ . Repite los pasos del al 13. Los saltos de
Ahora tienes que guardar este archivo con distinto nombre para evitar reescribirlo. Haz click en las opciones y
11
Para poder ver el resultado de estas modificaciones tienes que hacer click en la opcin .
N 37
16 11
76
Profesional
El documento completo tendr el aspecto siguiente.
modo la ventana del navegador quedar ms pequea. Pero el texto se ajustar
lnea deben concordar ahora con las lneas .
17
Para poder seguir trabajando con la plantilla debes cerrar el navegador haciendo click en .
Abre el archivo de la plantilla tal y como se ha descrito en los pasos del 1 al 5 del apartado Salto de lnea. Para dar un nombre al archivo tienes que repetir el paso 6 del apartado Salto de lnea. Pero en esta ocasin debes asignar el nombre al archivo y hacer click sobre el botn para guardarlo. Repite el paso 7 del apartado Salto de lnea. Escribe el siguiente texto .
y no son muy importantes. Sin embargo debemos acostumbrarnos a utilizarlos, ya que con ellos podemos conseguir que nuestros textos sean mucho ms claros. En la prxima entrega del curso de programacin en HTML podrs mejorar an ms el aspecto de tus textos utilizando varios tamaos y tipos de letra. Pero lo ms importante, aprenders a crear vnculos que te per-
Trabajar con prrafos

Ahora ya sabes cmo se pueden crear saltos de lnea en un texto. Pero en los textos de prrafos muy largos esto resulta demasiado complicado. En estos casos es mejor dejar que el navegador d un formato al texto automticamente para que el texto se pueda leer en toda la superficie de la ventana del navegador. De todas formas,es importante que organices el texto para que se pueda leer ms fcilmente.Para conseguirlo, lo ms cmodo es que separes el texto en varios prrafos individuales para obtener una presentacin ms clara y legible. Para marcar el comienzo de prrafo tienes que utilizar el comando y para terminar el prrafo, el comando .
Repite los pasos 11, 12 y 13 del apartado Salto de lnea. El resultado debe ser similar a ste .
3 4 5
Coloca el puntero de ratn en el borde derecho de la ventana del navegador de manera que tome la for-
Despus de introducir , pulsa $ y escribe algo ms de texto. Por ejemplo: .
ma Pulsa el botn izquierdo del ratn, y sin soltarlo, desplaza el puntero hacia la izquierda. De este
automticamente al ancho de la ventana. Para terminar, cierra la ventana del navegador haciendo click en . Puede parecer que los comandos
mitirn enlazar unas pginas con otras para conseguir que tu sitio web sea totalmente interactivo.
Direcciones online
v www.microsoft.com www.netscape.com
Abrir archivos HTML rpidamente

. En algunos ordenadores el logotipo aparece como . Esto se debe a que el navegador instalado por defecto es Netscape Navigator -, lo que no supone ninguna molestia, ya que todos los ejemplos que utilizamos en el curso se pueden ver a la perfeccin con cualquiera de los dos navegadores. Existe otra forma de abrir los archivos HTML rpidamente. pantalla, haz click sobre . De esta forma conseguiras reducir el tamao de la ventana. Haz click sobre el smbolo de cada una de las ventanas que tenemos abiertas.
En el captulo anterior te enseamos a abrir un archivo HTML con Internet Explorer -v . Pero existen otros mtodos. El ms rpido es hacer doble click sobre el archivo deseado:
Para ver un archivo HTML con el navegador tienes que abrir la carpeta correspondiente. Haz doble click en la carpeta
Para ver una de estas pginas en el navegador, haz doble click en el archivo correspondiente. Por ejemplo.
5 6
Abre la ventana con los archivos HTML tal y como hemos descrito en el paso 2 . Haz click sobre: y, sin soltar el botn del ratn, desplaza el icono hasta la ventana del navegador . Despus suelta el botn del ratn y el navegador mostrar el archivo seleccionado . Para terminar, debes cerrar el navegador y la carpeta.
2
78
Si ya has completado las prcticas del curso, encontrars algunos archivos HTML
Inicia el navegador deseado siguiendo la ruta correspondiente. Por ejemplo: , , y .Si el navegador ocupa toda la superficie de la
N 37
Profesional

Utiliza ttulos para resaltar el texto Varios formatos de ttulo diferentes Ejemplo con ttulos de varios tamaos Separacin del texto con lneas Organiza tu texto con listas Enlaza unas pginas con otras 58
59
60 60 60 61
Una de las opciones ms interesantes que puedes hacer con una pgina web es enlazar sus contenidos con otras pginas. En Computer Hoy te enseamos la forma ms fcil de dar vida propia a tus pginas web.
n la segunda entrega del curso de creaccin de pginas web con HTML 01 has creado una plantilla que te servir como base para tus documentos y has aprendido a utilizar el identificador 02 para el salto de lnea y para definir los prrafos del documento. En esta tercera entrega aprenders a mejorar el aspecto de tus pginas cambiando el tamao y tipo de letra de los textos, utilizando listas e introduciendo lneas de separacin. Adems, nos referiremos a los hipervnculos 03 , que te servirn para que el contenido de tus pginas web puedan servir de enlace con otras pginas HTML.
58
Utiliza ttulos para resaltar el texto

Todos los textos que se publican en Internet o en cualquier otro medio de comunicacin suelen tener un ttulo y estar divididos en varios captulos que permiten diferenciar las cuestiones que tratan. En HTML se dispone de seis tamaos de ttulo diferentes. Los ms grandes se utilizan para encabezar el documento y los ms pequeos para diferenciar sus distintos apartados.
A continuacin aparecer la ventana del editor:
35 37 38 39 40 41 42 43 44 45 46 47 48
En el captulo anterior del curso creaste una plantilla que te puede servir de base para la creacin de tus documentos HTML. Para abrir este archivo de plantilla haz click en y . Se desplegar el cuadro de dilogo 04 : Si la carpeta no est seleccionada, haz click en y selecciona la entrada . puedas seleccionarla. De momento no podrs ver tu plantilla, ya que slo se muestran los archivos que tengan extensin 05 (Pg 60) .TXT.
Para practicar con el primer ttulo tienes que arrancar el editor haciendo click sucesivamente en: , , , .
Si no puedes ver la carpeta haz click en las flechas o mueve el control hasta que aparezca y
N 38
Profesional
4 5
Pulsa la pestaa y selecciona la opcin .
ser ste .
01
HTML
Haz doble click sobre el archivo y la ventana del editor se abrir con la plantilla: .
10 11 12
Haz click en las opciones y para salvar los cambios. Cierra el editor haciendo click en .
Para abrir el documento que acabas de crear debes hacer click sobre la carpeta
Para no correr el riesgo de escribir sobre la plantilla original es mejor que guardes el archivo con otro nombre.
que se encuentra en el Escritorio 08 (Pg. 60) .
Tambin tienes que repetir el paso 6 , pero en esta ocasin tendrs que escribir como nombre de archivo. A continuacin haz click sobre el botn .
Para guardarlo ejecuta las opciones y del men principal. A continuacin cierra el editor haciendo click sobre .
y . En la siguiente ventana aparecer seleccionada la lnea con el nombre de archivo: . Escribe el nuevo nombre y haz click sobre el botn .
Haz click en
13
Haz doble click sobre
Repite el paso 7 del primer apartado e introduce estas lneas de texto
Repite el paso 12 del apartado anterior y haz doble click sobre el icono
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. En l se definen las imgenes, los textos y los hipervnculos que estarn incluidos en la pgina. En HTML se permite la utilizacin de dos formatos de imagen: el GIF y el JPEG. En algunas variaciones de este lenguaje se han incluido otros formatos grficos como el PNG. Tambin permite la introduccin de otros contenidos, como vdeo, sonido o incluso programas que se ejecutan en tu ordenador al abrir la pgina web.
02
Identificador
Selecciona colocando el puntero a la derecha de la palabra , haz click y sin soltar el botn del ratn desplaza el puntero hasta la parte izquierda para que la frase quede seleccionada en color azul. Escribe la lnea
y el navegador mostrar la pgina donde puedes apreciar el efecto del identificador . La lnea hace que aparezca el titular .
El lenguaje HTML se escribe utilizando identificadores. Estos son rdenes que das al navegador para que muestre la pgina web tal y como deseas. Cada identificador es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos o cualquier otra propiedad de la pgina.
03
14
8 9
Cierra el navegador y la ventana de la carpeta haciendo click en sus correspondientes. No olvides pulsar la tecla $ al final de cada lnea. En esta ocasin hemos utilizado el identificador que genera la orden de presentar el ttulo con tamao 2. Al contrario que en las tallas de ropa, un valor ms grande indica que el ttulo se mostrar ms pequeo. As, es ms pequeo que . A continuacin se abrir una ventana del navegador en la que se muestra el resultado del cdido HTML que acabas de introducir:
Hipervnculos
y pulsa la tecla $ . con y ordenars al navegador 06 (Pg. 60) que muestre un ttulo. Escribe las lneas siguientes: En el captulo anterior del curso te explicamos que las marcas y se utilizan para indicar al navegador el comienzo y final de cada prrafo. El comando indica un salto de lnea. El cdigo fuente 07 (Pg. 60) completo de la pgina debe
Varios formatos de ttulo diferentes

Cuando utilices ttulos para resaltar el texto de tus pginas puedes seleccionar entre seis tamaos de letra diferentes.Vamos a practicar un poco con todos los formatos de ttulo que se pueden aplicar al texto de una pgina web escrita en HTML:
Tambin se conocen como enlaces. Son referencias entre varias pginas que se encuentran en la red Internet. Se suelen distinguir por tener un color distinto al resto del texto, estar subrayados o representados por una imagen. Al hacer click sobre ellos, el navegador carga la pgina correspondiente. Los hipervnculos permiten que el usuario seleccione la informacin.
04
Repite los pasos del 1 al 5 del apartado anterior.
Para probar con todos los tamaos de ttulo tambin puedes introducir las lneas: .
Los ttulos que has escrito en el ejemplo anterior se representan en el navegador con un tamao de letra que se va reduciendo a medida
Cuadro de dilogo
Cuando termines el cdigo fuente debe tener este aspecto:

N 38
Son ventanas de Windows que muestran un mensaje donde se solicita una respuesta del usuario para una determinada situacin. Por ejemplo, los cuadros que aparecen al abrir un archivo y te permiten seleccionar la carpeta.
59
Profesional
05
Extensin
Todos los archivos tienen un nombre que indica su contenido y lo diferencia de los dems. A continuacin tienen una coletilla de tres letras que indica su tipo. La extensin de un archivo, son estas tres ltimas letras. Por ejemplo, las terminaciones: .txt (archivo de texto), .bat (archivo de proceso por lotes, .exe y .com (archivos ejecutables), .doc (documento de texto, normalmente Word).
06
que aumenta el valor del ttulo. Los valores ms pequeos que se pueden usar son y .
Cierra el navegador y la carpeta haciendo click en sus correspondientes.
ms atractivas es la lnea horizontal, es decir, una lnea que recorre el texto de izquierda a derecha. El identificador encargado de generar esta lnea es . Cuando utilicemos el identificador no hace falta ningn identificador de cierre con una barra oblicua.
Experimentos propios
Cada vez que cambies algo en un documento procura guardar una copia del documento anterior. As podrs volver al documento original cuando te equivoques y visualizar los dos archivos en el navegador para comprobar los resultados de las modificaciones. Procura realizar las modificaciones poco a poco. Tendrs que llevar a cabo los cambios detalle a detalle y comprobar los resultados en el navegador. De esta forma tus experimentos sern ms didcticos y podrs detectar los errores ms fcilmente en el caso de que algo no funcione correctamente.
Ejemplo con ttulos de varios tamaos

Ya sabes cmo funcionan los ttulos. Sin embargo, la mejor forma de comprenderlos es realizar un ejemplo prctico como el que te exponemos a continuacin:
Navegador
Es un programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utiliza para descargar ficheros o visualizar contenidos multimedia. En la actualidad, los navegadores ms utilizados son el Explorer de Microsoft y el Navigator de Netscape. El sistema operativo Windows 98 incorpora el navegador de Internet como uno de los accesorios bsicos.
07
Repite los pasos 1 a 5 del primer apartado de este artculo.Pero cuando tengas que elegir el archivo haz click sobre .As recuperars el primer documento que has creado. Haz click exactamente aqu y pulsa $ .
Repite los pasos 1 a 5 del primer apartado. Pero cuando realices el paso 5 tendrs que hacer doble click sobre el archivo . De esta forma abrirs el documento que has utilizado a lo largo de los ltimos apartados. Haz click en la antepenltima lnea, justo detrs de y pulsa la tecla $ de modo que aparezca una nueva lnea en blanco. Teclea y pulsa de nuevo la tecla $ . Ahora escribe la lnea siguiente:
Despus de estos tres captulos del curso ya sabes mucho sobre HTML. Es lgico que tengas ganas de experimentar con los conocimientos que tienes. Pero es muy importante que antes de aventurarte tengas en cuenta estos puntos: Procura organizar todo tu trabajo en una misma carpeta. De esta forma dispondrs de un acceso ms cmodo a todos los documentos HTML y podrs realizar una copia de seguridad de todos tus archivos mucho ms fcilmente. Procura utilizar siempre la extensin .HTML para todos los documentos.
En la lnea que acabas de crear ,
El cdigo fuente tendr un aspecto similar a este .
Cdigo fuente
escribe , pulsa $ , y escribe en la nueva lnea.A continuacin pulsa la tecla $ para insertar otra nueva lnea. Con se introduce una lnea y se separa la parte inferior del texto del resto del documento. Esto puede resultar ideal para introducir una nota a pie de pgina. En este ejemplo, la nota consiste en un nmero de telfono de informacin que se presenta en pantalla aplicando el comando de ttulo para que el texto aparezca con un tamao de letra bastante ms pequeo que el resto del documento.
Son una serie de instrucciones y comandos de programacin que se utilizan para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo utilizan los programadores para referirse al archivo que tiene las instrucciones de un programa.
08
4 5
Haz click en las opciones y . Despus cierra el editor haciendo click sobre . Repite los pasos 12 y 13 del primer apartado y comprueba el resultado de tu trabajo. Debe tener un aspecto similar a ste: Cierra el navegador haciendo click en .
Para comprobar el resultado de los cambios que acabas de realizar, haz click sobre y . A continuacin cierra el editor haciendo click en .
Repite los pasos 12 y 13 del primer apartado y comprueba el resultado de tu trabajo.Si has seguido todos los pasos correctamente tendr un aspecto similar a ste:
Escritorio
Es la superficie de trabajo de Windows 95 y 98. En ella puedes dejar todo tipo de ficheros y aplicaciones para que estn accesibles en cualquier momento. En el Escritorio se encuentran los iconos ms importantes del sistema, como el de Mi PC, la Papelera de reciclaje o Mis documentos. El Escritorio se puede personalizar a tu gusto con colores, grficos o incluso sonidos.
Cierra el navegador haciendo click en .
Separacin del texto con lneas

Con los ttulos,los prrafos y los saltos de lnea puedes hacer un montn de cosas para cambiar el aspecto de tus textos.Pero existen otras formas de delimitar y organizar los textos. Una de las
N 38
Organiza tu texto con listas

La pgina que acabas de terminar funciona correctamente. Pero an se puede mejorar escribiendo una lista con el men. El lenguaje HTML proporciona los identificadores y para crear listas.
60

Los identificadores de cierre correspondientes son los mismos pero precedidos de lnea oblcua: y . indica la insercin de una lista no ordenada donde los elementos estn diferenciados con varios smbolos de separacin. Por el contrario, enumera los distintos elementos de la lista. El ejemplo siguiente te vendr muy bien para practicar un poco: $ al final de cada lnea para saltar a la lnea siguiente. En esta ocasin hemos utilizado el identificador que te permite crear una lista numerada. Repite el paso 4 para comprobar el resultado de las modificaciones. La lista numerada debe tener un aspecto como este:
Profesional
Repite los pasos 1 a 7 del primer apartado. Pero en el paso 6 cuando tengas que debers escribir como nombre del documento.
Haz click en y . Despus cierra el editor haciendo click en y repite los pasos 12 y 13 del primer apartado de forma que aparezca la ventana del navegador con el resultado de la prctica: . El texto azul subrayado indica que las dos lneas son hipervnculos.Cuando pases el puntero del ratn sobre uno de estos elementos se convertir en una mano para indicar que son hipervnculos. Por ejemplo, coloca el puntero sobre y observa el aspecto que toma . el puntero:
Si aprietas el botn del ratn en este momento, el navegador saltar a la pgina correspondiente:
Repite el paso 1 del apartado anterior. Aparecer la ventana del editor con el archivo en el que has estado trabajando durante este captulo. Haz click en este punto y sin soltar el botn del ratn, desplaza el puntero hasta de forma que el texto quede seleccionado sobre fondo azul.
Escribe .El identificador viene de la palabra inglesa anchor, en castellano ancla y se utiliza para insertar un hipervnculo. indica al navegador que el texto que viene a con-
Si quieres ir de nuevo a la pgina de hipervnculos,haz click en la barra de del navegador sobre .
Por ltimo cierra el navegador Internet Explorer y la carpeta haciendo click sobre . En la prxima entrega del curso aprenders ms sobre los hipervculos y cmo insertar imgenes en las pginas.
Dar ttulo a la pgina

Sin soltar el botn del ratn, muvelo hacia la izquierda para que la lnea quede seleccionada en color azul: .
Pulsa la tecla $ y escribe las lneas . Para definir los elementos que forman la lista hemos utilizado el identificador . Cuando el navegador encuentra este identificador en el cdigo HTML dibuja un punto de enumeracin. El identificador de cierre correspondiente es . Haz click en y y cierra el editor haciendo click en . Para ver el aspecto que tendr la pgina web despus de realizar los cambios tienes que repetir los pasos 12 y 13 del primer apartado.
Para terminar cierra el navegador haciendo click sobre .
Enlazar unas pginas con otras

Hasta ahora los documentos HTML que has creado estaban totalmente aislados.Sin embargo,una de las mayores ventajas de los documentos que se publican en Internet es la posibilidad de relacionar unas pginas con otras. Pero antes tendrs que aprender a usar hipervnculos.
tinuacin es la direccin o el nombre de archivo que se mostrar al activar el hipervnculo. En este caso es el ejemplo con el que acabas de practicar en el apartado anterior .
Vas a crear un segundo hipervculo. Antes de nada escribe detrs de y pulsa la tecla $. Despus escribe . El cdigo fuente completo debe tener este aspecto:
En todos los ejemplos que has visto nos hemos centrado en la modificacin del documento HTML entre los identificadores y . Ahora aprenders a modificar la lnea de ttulo. En este caso realizars el cambio sobre el archivo curso3.html.
3 4
Introduce un texto cualquiera, por ejemplo:
Para cargar el archivo tienes que repetir el paso 1 del apartado separacin del texto con lneas. Haz click con el botn izquierdo justo en esta posicin:
Haz click en y . Cierra el editor haciendo click en y repite los pasos 12 a 14 del primer apartado. Cuando la pgina aparezca en el navegador tambin se mostrar su nombre en la barra de ttulos: .
El comando te permite crear una lista donde se enumeran los elementos. Repite el paso 1 de este apartado y haz click en

o y es el ttulo de ms tamaes el ms pequeo.
No sueltes el botn y mueve el puntero hasta
Estos son los contenidos ms importantes que has visto en este captulo:
Listas
Pueden ser de dos tipos: - Con los elementos se diferencian gracias a un smbolo. - Con los elementos van precedidos de un nmero de orden. Para definir los puntos individuales de una lista est el identifica-
dor de cierre
con su identificador .
Ttulos
de forma que el texto quede seleccionado en azul.
En HTML se introducen con identificadores que van desde hasta . Cada uno de ellos requiere un identificador de cierre, por ejemplo . El tamao del ttulo depende del nmero que acompae a la letra h.
Lneas
El identificador sirve para crear lneas sencillas y es uno de los pocos que no requiere identificador de cierre con lnea oblcua. Las lneas son un elemento que se utiliza con mucha frecuencia para separar las partes del texto.
N 38
Hipervnculos
Cuando una pgina hace referencia a otra. En nuestro ejemplo has introducido la lnea que hace referencia a otro documento HTML que se encuentra en la misma carpeta.
Pulsa la tecla $ y escribe las lneas . No olvides pulsar la tecla

61
61
Profesional

Hipervnculos en Internet Consigue tus imgenes en la Red Inserta fotos en tu pgina HTML Hipervnculos con imgenes Utiliza una imagen de fondo Inicio rpido del Bloc de notas 66
67
67 68 70 70
La combinacin de imgenes y texto dar a tus pginas un aspecto mucho ms agradable. Con un poco de buen gusto y siguiendo los pasos que te indicamos en este captulo te puedes convertir en un autntico artista del HTML.
n la anterior entrega del curso de creacin de pginas web HTML 01 has aprendido a crear ttulos que mejoran el aspecto de tus pginas e hipervnculos 02 para relacionar unas con otras. En esta ocasin, aprenders ms aspectos sobre el funcionamiento de los hipervnculos y utilizars imgenes que dotarn a tu pgina de un aspecto mucho ms atractivo.
te 03 de un hipervnculo tiene un aspecto similar a ste Para hacer que un hipervnculo haga referencia a una pgina de la World Wide Web 04 tendrs que seguir estos pasos:
Haz click en las opciones y . Se abrir el cuadro de dilogo 05
35 37 38 39 40 41 42 43 44 45 46 47 48
y seleccionar la opcin
Inicia el Bloc de notas haciendo click en la ruta , , y . A continuacin aparecer la ventana del editor
Hipervnculos en Internet
Hasta ahora has empleado hipervnculos para hacer referencia a archivos que se encuentran ubicados en tu ordenador. El cdigo fuen66
Ahora tienes que abrir el archivo de plantilla que has creado en el segundo captulo del curso.
Si no aparece la carpeta , tendrs que hacer click en y seleccionar la entrada Si no consigues ver esta entrada utiliza las flechas para desplazarte por la lista hasta que la encuentres. Cuando la selecciones, no podrs ver tu plantilla, ya que slo aparecen los archivos que tengan extensin 06 (Pg. 68) .TXT.
N 39
Para poder ver todos los archivos tienes que hacer click en
Haz doble click sobre el archivo y la ventana del editor se abrir con la plantilla:
Profesional
Guarda el archivo de plantilla con otro nombre haciendo click en y . En la siguiente ventana aparecer el nombre del archivo seleccionado en azul. Escribe y haz click en el botn . Para seleccionar la antepenltima lnea tienes que colocar el puntero en la parte derecha de , hacer click con el botn izquierdo del ratn y, sin soltar, desplazar el puntero hacia la parte izquierda , de forma que la frase quede seleccionada en color azul. Teclea
curso -v (pg. 70) y pulsa la tecla $ . Es un sitio web con un banco de imgenes gratuitas que se pueden copiar y distribuir libremente. Ahora slo vas a utilizar un par de imgenes. Pulsa con el botn derecho del ratn en
de forma que quede seleccionada en color azul y escribe la direccin - y pulsa la tecla $ . Al cabo de unos instantes el navegador mostrar la pgina web: Haz click en con el botn derecho del ratn y selecciona la opcin .
01
HTML
bas de escribir . Si tu ordenador est conectado en este momento a Internet, puedes hacer click sobre de forma que el navegador salte hasta la pgina correspondiente
6
y selecciona la opcin .
Repite el paso 3 de este apartado para guardar el archivo y haz click sobre para cerrar la ventana del navegador Internet Explorer.
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. Con l se definen la posicin, forma y funcionamiento de las imgenes, textos e hipervnculos incluidos en la pgina. En HTML se permite utilizar dos formatos grficos: GIF y JPEG.
02
Hipervnculos
Esto te permite vincular tus pginas con cualquier otra web que se encuentre en Internet.
Inserta fotos en tu pgina HTML

Da los pasos siguientes para practicar un poco con las imgenes.
y pulsa $. Te acuerdas de los dos identificadores 07 (Pg. 68) que acabas de utilizar? se utiliza para sealar los prrafos y indica al navegador 08 (Pg. 68) que debe realizar un salto de lnea. Escribe la lnea . .Si no comprendes su
12
Cierra el navegador y la carpeta de Mis documentos haciendo click en sus correspondientes.
Consigue tus imgenes en la Red

Incluyendo imgenes en tu pgina web conseguirs que sta resulte mucho ms atractiva. Lo primero que necesitas son los archivos de imagen que vas a insertar. Una de las formas ms fciles de obtener los archivos es visitar las pginas de algn servidor que ofrezca imgenes gratuitas.
El navegador suele indicar la carpeta donde se guardar la imagen correctamente. Si no ves la carpeta , repite el paso 3 del apartado anterior. Para terminar haz click en el botn . Repite los pasos 2 y 3 con esta otra imagen:
Abre el Bloc de notas y el archivo de plantilla repitiendo los pasos 1 a 5 del primer apartado. Sigue el paso 6 para guardar la pgina. Pero en este caso utiliza el nombre de archivo . Selecciona la cuarta lnea siguiendo las indicaciones del paso 7 del primer apartado y escribe . Marca despus la lnea y teclea las siguientes lneas .
Tambin se conocen como enlaces. Son referencias entre varias pginas que se encuentran en la red Internet. Se suelen distinguir por tener un color distinto al resto del texto, estar subrayados o representados por una imagen. Al hacer click sobre ellos, el navegador carga la pgina correspondiente.
03
Cdigo fuente
significado, conviene que repases la parte final del anterior captulo del curso. Se trata de un hipervnculo normal donde hemos cambiado el valor del parmetro 09 (Pg. 68) por la direccin de Internet 10 (Pg. 68) : El texto que aparece es la direccin del buscador 11 (Pg. 70) Yahoo.
2 5
Ahora tienes que conseguir una imagen para utilizala como fondo de tu pgina. Haz click en la barra de direcciones
Es una serie de instrucciones y comandos de programacin que se utiliza para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo emplean los programadores para referirse al archivo que posee las instrucciones de un programa.
04
World Wide Web
Arranca tu navegador haciendo doble click sobre el icono:
10
Haz click en las opciones y para guardar los cambios. Cierra el editor pinchando en . En el Escritorio 12 (Pg. 70) , haz doble click en:
El programa se abrir con la pgina de inicio 13 (Pg. 70) que tengas predeterminada. En este caso, se trata de la pgina del buscador Yahoo Espaa. Haz click en la barra de direcciones
Es la red mundial de datos de Internet. Aqu puedes encontrar informacin sobre innumerables temas. Lo ms importante es que toda la informacin est interrelacionada para que todos los datos se encuentren fcilmente.
05
Cuadro de dilogo
y se abrir la ventana donde debes hacer doble click sobre: para seleccionarla y escribe la direccin de la pgina de Internet que hemos elegido en Computer Hoy para este
N 39
11
El navegador se abrir, y mostrar el resultado de la pgina que aca-
Es una ventana de Windows que muestra un mensaje donde se te solicita una respuesta para una determinada situacin. Por ejemplo, los cuadros que aparecen al abrir un archivo y te permiten seleccionar la carpeta donde se encuentra el documento.
67
Profesional
06
Extensin
Todos los archivos tienen un nombre que indica su contenido y lo diferencia de los dems. A continuacin llevan incorporada una coletilla de tres letras que indica su tipo. La extensin de un archivo, son estas tres ltimas letras. Por ejemplo: .txt (archivo de texto), .exe y .com (archivos ejecutables).
07
El texto es un poco largo y tienes que prestar especial atencin cuando escribas los identificadores, ya que una equivocacin puede hacer que la pgina se muestre incorrectamente.
Antes de analizar las lneas de cdigo que acabas de escribir, te conviene guardar el archivo. Haz click sobre y .
Sin embargo, hay varios parmetros adicionales que permiten modificar el modo en que se presenta la imagen en el navegador. Con indicas que la imagen se debe situar a la izquierda y el texto se debe escribir en la parte derecha. A esta tcnica se le llama texto flotante. Si omites este parmetro el texto se mostrar en las lneas que estn situadas justo debajo de la imagen. Para que lo escrito no est pegado a la imagen hay que darle una separacin utilizando el parmetro . Esta instruccin deja un espacio libre a la izquierda y derecha de la imagen a modo de marco. Cuando la ilustracin se muestre en el navegador la vers as servar
tante inusual del comando . En esta ocasin se ha utilizado el parmetro , que indica al navegador que el texto que viene a continuacin se debe escribir debajo de la imagen
Identificador
08
La lnea no necesita muchas explicaciones. Se trata de un ttulo bastante sencillo. Si no entiendes bien su significado debers repasar el tercer captulo del curso que publicamos en el nmero 38 de Computer Hoy. Ocho lneas ms abajo est el apartado donde aparece la primera imagen El identificador informa al navegador que debe prepararse para mostrar una imagen. sirve para indicar cul es la que se debe presentar. En este caso, la imagen se encuentra en la misma carpeta que la pgina HTML. Este parmetro es ms que suficiente para mostrar una imagen en un navegador.
Descifrar el significado de esta lnea no es muy difcil. Los nicos parmetros que se han cambiado son el nombre del archivo y .Right significa en castellano derecha, e indica al navegador que debe situar la imagen en el margen derecho de la pantalla. El resto del texto aparecer a la izquierda de la ilustracin. Dentro de este texto se ha insertado un hipervnculo que enlaza la pgina con la web de ComStock.
Sin este comando, el prrafo estara junto a la primera imagen y su aspecto no sera muy atractivo
Navegador
Es un programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utiliza para descargar ficheros o ver contenidos multimedia. En la actualidad, los navegadores ms utilizados son Explorer, de Microsoft y el Navigator, de Netscape. El sistema operativo Windows 98 incorpora el navegador de Internet como uno de los accesorios bsicos.
09
Despus aparece la lnea de la segunda imagen
Sin hspaceno habra ninguna separacin
Un poco ms adelante aparece una forma bas-
Cuando termines de leer todo el cdigo, cierra el Bloc de notas haciendo click en y doble click sobre . Despus sobre para que puedas ver tu primera pgina web con imgenes:
Hipervnculos con imgenes

y en:
Parmetros
Son informaciones que determinan el funcionamiento de un programa. Tambin se conocen como argumentos.
10
Direccin de Internet
Todas las pginas de la red Internet se encuentran organizadas en direcciones. Cuando deseas visitar una pgina web bastar con que escribas la direccin correspondiente en el campo de direcciones de tu navegador. Las direcciones de Internet empiezan por http:// y terminan con el nombre de la pgina web.
Las imgenes y los hipervnculos se pueden complementar muy bien. Al hacer click sobre una imagen que hace referencia a una direccin de Internet, la pgina correspondiente se abrir automticamente en el navegador. Para poder hacer este ejercicio es necesario que tengas en tu disco duro las dos imgenes del apartado Consigue tus imgenes de la red.
estas tres lneas Su funcionamiento es muy simple. Escribe un hipervculo normal, pero en lugar de teclear un texto entre <a href...> y </a>, inserta una imagen con <img...>. Adems, si olvidas el parmetro border=0, el navegador presentar un borde azul alrededor de la imagen.
La construccin es la misma, pero se omite la orden <img...>. De esta forma el texto que se encuentra en su lugar funciona como hipervnculo.
El navegador mostrar el hipervnculo de imagen y el de texto. Para probarlo, desplaza el puntero sobre
Utiliza el archivo de plantilla de la sengnuda parte del curso. Para abrirlo tienes que repetir los pasos 1 a 6 del primer apartado. En el paso 6 debes utilizar el nombre para guardar el archivo. Repite el paso 7 del primer apartado e introduce
Para dejar clara la diferencia que existe entre un vnculo normal y uno que funciona con una imagen escribe estas tres lneas a continuacin
Antes de ver el resultado del cdigo que acabas de escribir haz click sobre y . Despus cierra el Bloc de notas pinchando sobre . En el escritorio, haz doble click en:
y sobre y observa que en cualquiera de los dos casos toma el aspecto siguente: Si haces click sobre cualquiera de ellos acceders a la pgina correspondiente. Para cerrar el navegador haz click sobre .
68
N 39
Profesional
11
Buscador
Son sitios web que te permiten buscar informacin en Internet. Su funcionamiento es bastante fcil. Basta con que introduzcas las palabras del tema sobre el que deseas obtener informacin y pulses el botn buscar. En pocos segundos te aparecern los resultados en la pantalla, con una breve descripcin de las pginas que te permitir seleccionar la que ms te interese.
12
Cuando quieras cerrar el navegador tendrs que hacer click sobre .
Utiliza una imagen de fondo

Las imgenes que has insertado en tu pgina web han mejorado mucho su aspecto. Sin embargo, sta puede seguir mejorando en muchos aspectos. Por ejemplo en el fondo. Para conseguirlo sigue estos pasos:
ground, el navegador coge el archivo de imagen que se le indique y lo utiliza como fondo de la pgina. La ilustracin se repetir varias veces como si fuera un mosaico que cubre todo el fondo de la pantalla.
Inicio rpido del Bloc de notas
Escritorio
Es la superficie de trabajo de Windows 95 y 98. En ella puedes dejar todo tipo de ficheros y aplicaciones para que estn accesibles en cualquier momento. En el Escritorio se encuentran los iconos ms importantes del sistema, como el de Mi PC, la Papelera de reciclaje o Mis documentos. Y se puede personalizar a tu gusto con colores, grficos o incluso sonidos.
13
Ejecuta el Bloc de notas y preprate para abrir un archivo siguiendo los pasos 1 a 4 del primer apartado. Cuando tengas que seleccionar el archivo, haz click sobre y despus sobre . Ahora busca la lnea que comienza por y haz click exactamente detrs de la palabra
Para ver el resultado de los cambios haz click en y . Despus cierra la ventana del Bloc de notaspulsando sobre y abre la carpeta de documentos haciendo doble click sobre:
Cuando diseas pginas web en HTML tienes que ejecutar constantemente el Bloc de notaspara escribir el cdigo de las pginas. Abrir el editor una y otra vez desde el men puede resultar algo pesado. Para evitarlo, lo mejor es colocar un acceso directo en el Escritorio. De esta forma te bastar con hacer click sobre un icono para que el Bloc de notas se abra rpidamente.
Haz click con el botn derecho del ratn en
y, sin soltarlo, mueve el puntero hacia un lugar vaco del Escritorio
4 5
Suelta el botn derecho y haz click sobre la opcin El resultado debe ser un acceso directo con este aspecto:
Haz doble click sucesivamente sobre:
(En algunos ordenadores la unidad C: puede tener un aspecto algo distinto o utilizar otro nombre).
Haz doble click sobre el archivo:
Pgina de inicio
Es la primera pgina web que se muestra cuando se inicia el navegador. Normalmente es la de un buscador conocido o aquella que te permite acceder a otras pginas.
14
URL
Pulsa la barra espaciadora y escribe el siguiente texto: . La lnea completa tendr este aspecto: . Con el parmetro back-
para ejecutar el navegador y ver el resultado de tu pgina: Con esto damos por terminado este captulo donde has aprendido a trabajar con imgenes en HTML. En la prxima entrega sabrs cmo dar formato al texto de tu pgina web, alineando, justificando y tabulando los prrafos y lneas.
en para que los iconos de la ventana se hagan visibles y depus pulsa varias veces sobre la flecha hasta que veas el icono
Haz
click
En el futuro podrs ejecutar el Bloc de notas haciendo doble click sobre el icono
Cierra carpeta
la
haciendo click en .
Direcciones online
v www.comstock.com/web www.dimpres.com/fonbeig3.htm -V www.altavista.com

-
Siglas correspondientes a Uniform Resource Locator (en castellano Localizador homogneo de recursos). Una URL es una direccin de Internet donde se encuentra una pgina web.
15

Insertar imgenes
Para insertar imgenes en tus pginas HTML tienes que utilizar el identificador Adems, debes utilizar el parmetro para indicar el nombre del fichero de imagen. Por ejemplo: .
En este apartado te explicamos los puntos ms importantes de este captulo.
Posicin de las imgenes

El parmetro se utiliza para indicar si la imagen se sita en el margen derecho o en el margen izquierdo .
Pxeles
Las imgenes con las que trabaja el ordenador se componen de muchsimos puntos de varios colores que al ser observados en conjunto forman una imagen. Cada uno de estos puntos es un pixel. Cuantos ms pxeles tenga la imagen, mejor, ya que ofrecer ms calidad.
Hipervnculos en Internet
Para referirse a una direccin de Internet desde una pgina HTML hay que especificar la URL 14 completa de la pgina deseada. Por ejemplo, la orden -V es la direccin de una pgina web que puedes introducir en el recuadro de direcciones de tu navegador
indica cuntos pxeles 15 se separa el texto de la imagen. Por ejemplo: distancia el texto de la imagen en 20 pxeles.
Utilizar una imagen de fondo

En este caso, el navegador muestra el archivo de imagen especificado en forma de mosaico en el fondo de la pantalla. El comando se introduce en la seccin , que tomar el aspecto siguiente .
Colocacin del texto

El texto se amolda automticamente al espacio que queda libre entre las imgenes. Para dejar un borde alrededor de ellas se utiliza , que
70
N 39
Profesional

Formato de texto negrita y cursiva Cambia el tipo de letra Utiliza varios colores en el texto Modifica el tamao de letra Cdigo fuente completo 72
73
73 77 77
Si quieres conseguir que tus pginas dejen de ser montonas y aburridas tendrs que jugar un poco con el formato del texto. Prueba a cambiar tus letras con varios tamaos, colores y formas buscando el resultado ms divertido.
n la cuarta entrega del curso sobre HTML 01 aprendiste a insertar imgenes en tus pginas web para hacerlas ms llamativas. En esta ocasin trataremos un tema que tambin est muy relacionado con el diseo: el formato del texto. Utilizando letras de distintos colores, tamaos y tipos puedes conseguir que tus pginas resulten mucho ms claras y fciles de leer.
ra este fin. Para realizar este ejemplo utilizars de nuevo el archivo de plantilla que creaste en el segundo captulo del curso (ver Computer Hoy n37, pg. 74).
vlido.Al final tienes que ver la ventana del Bloc de notas:
Formato de texto negrita y cursiva

La forma ms rpida y sencilla de dar formato a los textos es mostrarlos en negrita o cursiva. En HTML existen dos identificadores 02 pa72
Ejecuta el Bloc de notas haciendo click en y llevando el puntero hacia , y . Haz click de nuevo. Si has seguido todos los pasos del anterior captulo del curso, te bastar con hacer doble click sobre el icono:
35 37 38 39 40 41 42 43 44 45 46 47 48
Haz click en las opciones y . A continuacin se abrir el cuadro de dilogo 04 que te permitir seleccionar el archivo de la plantilla:
Si ves que la carpeta no aparece en la lista,haz click sobre los controles hasta que aparezca y pulsa sobre ella.
Si no ves , haz click en hasta que aparezca. Para abrir el archivo haz doble click en y se mostrar en pantalla
4 3
Si no aparece la carpeta haz click sobre y selecciona la lnea
N 40
Para ver la plantilla haz click sobre y despus sobre la opcin
que se debe encontrar en el Escritorio 03 .Cualquiera de los dos mtodos puede ser
Foto: Stock Photos. Montaje: Computer Hoy.
Profesional
Para dar un nombre al archivo haz click en y . En el lugar de , debes escribir el nombre . Despus haz click sobre el botn . Mueve el puntero hasta la parte derecha de . Haz click con el botn izquierdo y, sin soltarlo, desplzate hacia la parte izquierda hasta que el texto aparezca seleccionado: . Escribe las siguientes lneas:
Cambia el tipo de letra

Hasta el momento,el texto de todas las pginas que has creado durante el curso se visualizan con el tipo de letra Times New Roman. Para cambiarlo, te bastar con hacer una breve indicacin al principio y final del texto que desees modificar. Para transformar una pgina completa al tipo de letra Arialtendrs que dar los pasos siguientes:
se utiliza para indicar al navegador un formato de texto y se acompaa de varios parmetros 06 (Pg. 76) . En esta ocasin, slo vas a utilizar uno de ellos. Con se consigue que el texto escrito a continuacin se muestre con letra Arial hasta que aparezca el identificador de cierre .
sobre la carpeta:
01
HTML
y el archivo:
El navegador mostrar el documento con el tipo
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. En l se definen la posicin, forma y funcionamiento de las imgenes, los textos y los hipervnculos incluidos en la pgina web.
02
Identificador
Para este ejemplo utilizars la pgina HTML que has creado en el captulo anterior de este curso de letra que acabas de seleccionar:
Adems del conocido identificador que se utiliza para generar un salto de lnea, aparecen dos nuevos comandos: muestra el texto que aparezca a continuacin en negrita hasta el identificador de cierre . Con aplicas el formato cursiva hasta que escribas .
Cierra el navegador haciendo click en .
Utiliza varios colores en el texto

Algunos elementos de texto tienen mejor aspecto y resultan ms llamativos cuando utilizan un color distinto del resto. Empleando el identificador Fonttambin puedes dar el color que desees a letras, palabras o prrafos enteros.Para practicar un poco, sigue estos consejos:
03
Escritorio
Para ver los resultados, guarda el documento con las opciones y . Despus cierra el Bloc de notas haciendo click en y abre el documento haciendo doble click sobre el icono:
que se encuentra en el Escritorio. Aparecer una ventana con todos tus documentos HTML. Haz doble click sobre:
Si no tienes el archivo, puedes realizar el ejercicio con cualquier otra pgina, pero debes prestar mucha atencin, porque algunos pasos pueden variar un poco. Lo mejor es que utilices la pgina indicada, que mostramos en el nmero 39 de Computer Hoy.
Pulsa las teclas y N simultneamente para que el cursor 07 (Pg. 76) se coloque justo al final del cdigo fuente 08 (Pg. 76) . Haz click justo detrs de y pulsa $ . Ahora escribe la lnea . Haz click en y para almacenar
13 2
Repite los pasos del 1 al del apartado anterior. El texto del principio debe aparecer en un color
Es la superficie de trabajo de Windows 95 y 98. En ella puedes dejar todo tipo de ficheros y aplicaciones para que estn accesibles en cualquier momento. En el Escritorio se encuentran los iconos ms importantes del sistema, como el de Mi PC, la Papelera de reciclaje o Mis documentos.
04
Cuadro de dilogo
(Es posible que en tu ordenador el archivo aparezca con un tamao ms reducido. En ese caso haz doble click sobre ).
2 3 4
Repite los pasos del 1 al 4 del apartado anterior. Haz click en el archivo . y en el botn
Es una ventana de Windows que muestra un mensaje donde se te solicita una respuesta para una determinada situacin. Por ejemplo, los cuadros que aparecen al abrir un archivo y te permiten seleccionar la carpeta donde se encuentra el documento.
05
Cuando tengas abierto el archivo, haz click justo detrs de
Navegador
10
El navegador 05 mostrar el resultado con letra en negrita y pulsa la tecla $ para insertar una nueva lnea distinto. Por ejemplo, marrn. Para conseguirlo haz click en esta posicin y cursiva . Para cerrar la ventana haz click sobre .
Escribe ahora el texto: . El identificador
los cambios. Cierra el Bloc de notas haciendo click en el botn . Despus haz doble click
N 40
Es un programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utiliza para descargar ficheros o ver contenidos multimedia. En la actualidad, los navegadores que se utilizan ms frecuentemente son el Explorer, de Microsoft, y el Navigator, de Netscape.
L
73
Profesional
M
06
Parmetros
Son informaciones que determinan el funcionamiento de un programa. Tambin se conocen como argumentos.
07
Pulsa la barra de espacio ( ) y escribe el texto . Las primeras lneas del archivo tendrn ste aspecto: .
fuente. Cuando se ejecuta la orden de la lnea coges la caja ms grande y la pintas de color marrn. Despus viene la instruccin con la que colocas en el interior una una caja ms pequea que previamente has pintado de color azul. El comando te sirve para cerrar las cajas con su tapa correspondiente.
El polmico <font>
se debe recurrir a las Hojas
Cursor
Es la marca que indica en que punto del documento tendr lugar la siguiente introduccin de datos. En la mayora de casos se representa con una pequea lnea vertical negra que parpadea.
08
Cdigo fuente
Haz click justo detrs de esta posicin .
Es una serie de instrucciones y comandos de programacin que se utiliza para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo emplean los programadores para referirse al archivo que posee las instrucciones de un programa.
09
Si no ves esta parte del texto, utiliza la tecla & para desplazarte hacia abajo hasta que aparezca.
W3C
Es el World Wide Web 10 Consortium. Este consorcio es la unidad de control ms importante para las normas en Internet y posee filiales en Estados Unidos y Europa. Se ocupa de definir el estndar del lenguaje HTML para conseguir una normalizacin mundial. Tambin se encarga de coordinar las tecnologas que surgen para Internet.
10
orden . Despus haz click en la misma lnea, justo detrs de e inserta el texto . Pulsa la tecla ( . Despus $ y por ltimo # . El resto del texto se mover hasta la lnea siguiente para mostrarse con ms claridad. La lnea completa debe terminar con un aspecto similar a ste:
Escribe
la
Ahora puedes comprobar el resultado del ejercicio. Haz click en , y para guardar los cambios y cerrar el Bloc de notas. Abre la pgina web haciendo doble click sobre el icono del escritorio:
Muchos diseadores de pginas web huyen del identificador . La razn es que su manejo puede llegar a resultar bastante complejo. Por ejemplo, cuando hay que cambiar el color de letra en cada apartado o si todas las primeras letras de cada prrafo deben aparecer con un tamao ms grande y un tipo de letra determinado. En estos casos hay que utilizar el identificador tantas veces que al final se pierde la perspectiva de la pgina y resulta menos comprensible. Este es el motivo por el que el W3C 09 - v , organismo responsable de la normalizacin del lenguaje HTML, recomienda no utilizar el identificador . En su lugar
de estilo en cascada
11
. Sin embargo, aunque esta solucin pueda resultar vlida, tiene el inconveniente de no funcionar correctamente con los navegadores que son algo antiguos. Por el contrario, el identificador puede trabajar sin problemas con las primeras versiones de los navegadores. Adems, en muchas ocasiones el comando es la forma ms cmoda y rpida de dar formato al texto. Por ejemplo, cuando se fija un mismo tamao y tipo de letra para todo el documento. No obstante, conviene que aprendas a utilizar las hojas de estilo en cascada, que sern tratadas en el nmero 45 de Computer Hoy.
y despus en: El texto del documento aparece en color marrn pero algunas palabras resaltan por el color azul .
World Wide Web
Es la red mundial de datos de Internet. Aqu puedes encontrar informacin sobre innumerables temas. Lo ms importante es que toda la informacin est relacionada para facilitar la bsqueda de datos.
11
Hojas de estilo en cascada
Son plantillas de formato para los textos de las pginas Web. Determinan, por ejemplo el tamao y tipo de letra o el ancho de prrafos o el color de fondo.
Su funcionamiento es bastante sencillo. Primero has introducido un comando que cambia el texto a color azul y despus el identificador de cierre que lo devuelve al color que tena anteriormente. Esta propiedad suele recibir el nombre de anidacin. Para comprender el principio de la anidacin puedes pensar en varias cajas de diferentes tamaos y colores que estn contenidas unas dentro de otras. Imagina que la ms grande es marrn y contiene a todas las dems. Si la comparamos con la pgina web que ests creando en este ejemplo se correspondera con el primer identificador . Ahora piensa que dentro de la caja grande hay otra ms pequea que est pintada de azul. En este caso se corresponde con el segundo identificador del cdigo

concluir un formato de escritura hay que utilizar .
Color de la fuente
Utilizando el comando establece el color del texto como marrn. Detrs de color aparece el nombre del color en ingls, por ejemplo red (rojo) o green (verde). En el cuadro de la pgina 72 tienes los colores ms importantes con sus nombres correspondientes.
Negrita y cursiva
Si quieres dar formato negrita a una parte del texto tienes que utilizar el identificador . Todas las palabras que aparezcan a continuacin se mostrarn en negrita, cuando escribas el iden. tificador de cierre La escritura en cursiva funciona de la misma forma, pero utiliza los identificadores y .
Otros tipos de letras

Existe la posibilidad de determinar un tipo concreto de letra para todo o una parte del documento. Por ejemplo, es una orden con la que se comienza a escribir utilizando la fuente Arial. El parmetro que escribas detrs de designa el tipo de letra elegido y siempre debe ir escrito entre comillas, ya que en caso contrario el navegador puede encontrar problemas con los nombres de fuentes de letra que tienen varias palabras. Por ejemplo, Times New Roman.
Tamao de letra
Viene indicado por el parmetro , por ejemplo en . El valor 3 indica un tamao de fuente normal, mientras que los valores ms altos se corresponden con un tamao ms grande y los inferiores con una fuente ms pequea de lo habitual. Los valores vlidos van del 1 al 7.
Uso del identificador <font>

Se utiliza para dar un formato continuo a los textos. Este identificador aparece siempre con uno o varios parmetros adicionales. Para
N 40
76
Profesional
Para cerrar el navegador debes hacer click en
Modifica el tamao de letra

Hasta ahora utilizabas a para cambiar el tamao de letra. Pero esto tiene sus limitaciones.Es mejor utilizar el identificador . En el ejemplo siguiente transformars dos letras a un mayor tamao para mejorar el aspecto de la pgina. Para hacerlo, utilizars de nuevo la pgina con la que has trabajado anteriormente.
Haz click en la segunda lnea del segundo apartado, justo delante de
3 4
Introduce
el .
texto
13
Repite los pasos del 1 al del apartado Cambia el tipo de letra.

X
Pulsa la tecla ( de forma que el cursor parpadee a la derecha de la letra mayscula E . Ahora escribe el identificador de cierre . La lnea debe tener este aspecto . Desplaza el cursor hacia abajo pulsando la tecla &
Gama de colores
cuadro inferior muestra los nombres ms importantes junto a sus colores correspondientes. En la direccin de Internet - se ofrece informacin muy detallada acerca de los colores. Por ejemplo,
En HTML se puede indicar el color que se desea utilizar mediante combinaciones de cifras o con nombres. Pero estos nombres estn en ingls y para algunos pueden resultar difciles de comprender. El
varias veces hasta que aparezca la lnea
Escritorio:
y en: Haz click justo delante de la letra E y repite los pasos 3 y 4 de este mismo apartado. El resultado debe tener un aspecto similar a ste Con el parmetro asignas el tamao que a todas las letras que escribas a continuacin. Los valores que introduzcas no tienen nada que ver con el tamao de letra de tu procesador de texto, y pueden ir desde el 1 hasta el 7. Por norma general, se corresponde con un tamao de letra normal, de forma que los valores superiores aparecern ms grandes y los inferiores ms pequeos.
Ahora vers el cdigo completo de la pgina HTML imagenes.htmly podrs compararla con el texto fuente correcto: Si encuentras algn error, corrgelo y haz click en y . Despus cierra el Bloc de notas pulsando sobre . En la siguiente entrega del curso de HTML aprenders a utilizar tablas para presentar cifras y dar a tus pginas web un aspecto mucho ms ordenado y atractivo.
7 8
. El resultado debe tener este aspecto: Cierra el navegador haciendo click en .
El cdigo fuente completo

El documento HTML con el que has trabajado en estos dos ltimos captulos del curso empieza a tener muchas lneas y te puede resultar algo complicado. Si te has equivocado en alguno de los pasos es posible que los resultados sean muy distintos de los que te indicamos.Para evitar problemas con los errores de escritura, puedes comprobar todo el cdigo fuente, tal y como te indicamos a continuacin.
6
y
Para ver el resultado, haz click en la opcion
Direcciones online
y . Posteriormente haz doble click en el icono del

N 40
13
Repite los pasos del 1 al del apartado Cambia el tipo de letra.
v www.w3.org selfhtml.com.ar/tcae.htm
I
77
Profesional
N N N Insertar imgenes N Distintos formatos de escritura N Divisin de pginas con tablas N Para Insertar y dimensionar marcos N expertos Ejemplo de formulario N Qu son y para qu sirven los identificadores N Conceptos bsicos del estilo en cascada N Para N profesionales HTML con Java Probando las pginas HTML N Principios legales de las pginas de Internet N
Para principiantes Listas, barras y vnculos
Fundamentos: crear el primer archivo HTML Cmo disear y dar formato a los textos
35 37 38 39 40 41 42 43 44 45 46 47 48
Una tabla sencilla Tablas ms espaciadas Cmo colorear la tabla Solucin de problemas Mejorar el layout con la ayuda de las tablas no que traducido del ingls significa mesa o tabla. En esta primera parte de esta entrega vers cmo utilizar correctamente este tag para mostrar texto y nmeros en tu pgina. En la segunda, pondrs en prctica estos nuevos conocimientos utilizando la pgina ejemplo de la entrega anterior del curso. Despus descubrirs lo bien que funciona como ayuda en el layout 03 . Empezars construyendo una sencilla tabla de temperaturas. Esta tabla contiene el nombre de tres meses, sus temperaturas medias y una pequea observacin.
62 63 63 64 64
(si todava no tienes este icono en el Escritorio, puedes ver cmo crearlo en la pgina 74 del nmero 37 de Computer Hoy).
Carga la plantilla 04 que utilizaste en la segunda entrega del curso.Una vez localizado, lo tienes que guardar haciendo click sobre y sobre . En este caso selecciona el siguiente nombre para el fichero.
Foto: Fototeca 9x12 S.L. Montaje: Computer Hoy.
Una tabla sencilla

Con tus conocimientos actuales de HTML puedes escribir todos los datos conjuntamente Sin embargo, escritos de esta forma el resultado no es el esperado . Con la ayuda de una tabla obtendrs un resultado ptimo.
Haz click justo a la derecha de esta lnea y, mientras mantienes presionado el botn izquierdo del ratn, arrastra el cursor hacia la izquierda hasta que todo el texto quede seleccionado con un fondo azul.
Te parece impresionante lo que hacen estos chicos con sus tablas? T puedes hacerlo mucho mejor. Con la sexta entrega del curso de HTML sers, en muy poco tiempo, un as de las tablas. Eso s, aqu ni te mojars ni tragars agua.
Abre el editor con un doble click sobre
E
62
n la ltima entrega de este curso deHTML 01 aprendiste a configurar el tipo de letra. En la prxima entrars de lleno en el diseo de una pgina completa, y para ello, las tablas
son una herramienta fundamental. Con ellas podrs mostrar en tu web todo tipo de informaciones perfectamente ordenadas y de un modo mucho ms atractivo. Las tablas son algo realmen-
te prctico que te permitir sacarle el mximo jugo a tus pginas. El nombre del tag 02 para disear tablas es fcil de recordar: y su terminacin es , trmiN 41
Profesional
Introduce estas lneas de cdigo 05 (Pg. 64) . Con le indicas al navegador 06 (Pg. 64) que a continuacin viene una tabla. Aqu, adems, tendrs que definir el parmetro 07 (Pg. 64) . Esta orden divide las celdas 08 (Pg. 64) por medio de unas lneas muy finas. Si te decides por el valor cero, no aparecern las lneas divisorias. A continuacin aparece el tag . ste indica al navegador que todas las entradas que se encuentran hasta se deben incluir en una nica fila. En ingls las filas de las tablas se conocen por row. se puede traducir por table row, en castellano, fila de la tabla. A continuacin aparece . Esta lnea y las dos siguientes se encargan de los ttulos de la columna.Despus vers que stos aparecen en negrita: es la abreviacin en ingls de table header, o sea, cabecera de la tabla. Tras , que cierra la lnea, vienen otras tres lneas como la siguiente: . stas contienen los datos que vas a introducir en la tabla. Por este motivo se conoce como table data o, traducido, datos de la tabla. Puedes ver que siempre aparecen tres lneas con o que se complementan con sus respectivos o . Con estos tags, el navegador sabe que se trata de una tabla con tres columnas. Al final del texto puedes observar tambin , que le indica al navegador que termina la tabla.
lneas. Para ello haz exactamente click sobre
tabla e incluso cada celda individualmente. En el siguiente ejemplo colorears la fila con los ttulos y resaltars las celdas con los mximos de temperatura utilizando un fondo rosa.
01
HTML
1 3
Despus pulsa la barra de espacio ( ) y escribe este texto: . La lnea al completo debe tener este aspecto: El parmetro se encarga de separar el texto de los bordes de la tabla. En el siguiente apartado podrs ver cmo mejorar el aspecto de las tablas en tus pginas. Pero antes de ello cierra el navegador con un click en .
Inicia el editor y carga el fichero del paso 1 del apartado Tablas ms espaciadas, . En el texto tendrs que introducir unos comandos adicionales. A continuacin click exactamente sobre este punto
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. En l se definen la posicin, forma y funcionamiento de las imgenes, los textos y los hipervnculos incluidos en la pgina web.Se puede decir que es la base misma de las pginas web.
02
Tag
Guarda el fichero con un click sobre y sobre . Seguidamente cierra el editor pinchando sobre y abre la carpeta
Tablas ms espaciadas
Ya sabes cmo se construyen las tablas. En este apartado y en los siguientes vas a ver la manera de mejorar su aspecto. Ahora haz doble click sobre . La tabla aparecer ms desahogada .
Inicia el editor . Haz click sobre y luego en y selecciona el fichero con las tablas que has creado antes .
Presiona la barra espaciadora ( ) y escribe el texto . La lnea al completo debe tener el siguiente aspecto El parmetro le indica al navegador que la fila de la tabla correspondiente se tiene que representar con el color indicado. En este ejemplo, el color es el amarillo (en ingls yellow). Para colorear solamente una celda de la tabla, tendrs que desplazarte hasta el final del cdigo fuente. En la lnea donde se define la celda que quieres modificar debers hacer click en
El lenguaje HTML se escribe utilizando identificadores, tambin llamados tags, trmino que proviene del ingls etiquetas. Estos identificadores son rdenes que das al navegador y que l interpreta para mostrar la pgina web tal y como deseas. Cada identificador es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos, as como cualquier otra propiedad de la pgina.
03
Layout
Es la ordenacin y colocacin de todos los elementos que componen una pgina web, es decir textos, imgenes, tablas, grficos, etctera. Tambin son elementos del layout los colores y el tipo de letra. A la hora de realizar tus diseos ten en cuenta que un layout claro permitir una navegacin mucho ms facil.
04
Fichero plantilla
Ya es hora de que des un vistazo al resultado. Haz click sobre y sobre . Seguidamente cierra el editor con un click sobre y abre la carpeta con un doble click sobre
Primero vas a solucionar las estrecheces de tu tabla y a separar un poco las
que en la versin anterior.Pero el aspecto de tu pgina web an se puede mejorar.
Haz doble click sobre .Vista con el navegador, la tabla tendr el siguiente aspecto:
Cmo colorear la tabla

Si lo deseas puedes colorear cada columna o fila de la
N 41
Seguro que recordars aquellas hojas rayadas que, puestas bajo una hoja en blanco, permitan escribir sin torcerse. Pues bien, el concepto es similar, un fichero que incorpora los componentes estndar del cdigo de una pgina web, y que al mismo tiempo sirve como recordatorio de la estructura de este tipo de ficheros, te permite ahorrar tiempo a la hora de introducirla.
63
Profesional
05
Cdigo
Consiste en una serie de instrucciones y comandos de programacin que se utilizan para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo emplean los programadores para referirse al archivo que contiene las instrucciones de un programa.
06
Pulsa la tecla espacio ( ) y escribe a continuacin . La lnea al completo tendr el siguiente aspecto: En este caso el tambin se encargar de modificar el color. Pero este cambio slo afecta a una celda. El color de la celda es el pink, es decir, rosa.
Inicia el editor y carga,haciendo previamente click sobre y en , el fichero .
Para mejorar el aspecto de la pgina haz click justo sobre y, a continuacin debers pulsar C y ' .
Como puedes comprobar, el cursor se va a situar dentro de una lnea en blanco Teclea el siguiente texto y presiona la tecla C . Esto hace que el navegador introduzca en este punto una tabla. El parmetro
Presiona la tecla C y escribe el siguiente cdigo
Navegador
Es un programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utiliza para descargar ficheros o ver contenidos multimedia. En la actualidad, los navegadores que se utilizan ms frecuentemente son el Explorer, de Microsoft, y el Navigator, de Netscape.
07
Guarda los cambios con un click sobre y sobre . Seguidamente cierra el editor pinchando sobre y abre la carpeta con un doble click sobre el icono
Dentro de la carpeta debers hacer doble click sobre y as podrs (en castellano ancho) debe ser de 600 puntos. Adems, vas a alinear la tabla en el centro de la pgina. Esto se hace con el comando (alineacin) y con el valor para centro. El ltimo parmetro, , se encarga de separar el texto de los bordes dentro de la tabla. comprobar los cambios de colores en tu tabla.
Comienza una nueva fila de la tabla. En este ejemplo utilizars una fila con dos celdas. Empieza con la primera. En sta utilizars uno de los parmetros ms importantes de las tablas:el , que se encarga de situar el contenido de la celda en su parte superior. Si no haces uso de este parmetro el contenido de la celda se situara a media altura y no se diferenciara de la celda contigua.ste sera el resultado:
Parmetro
Cierta informacin que determina el funcionamiento de un programa. Tambin se le denomina argumento.

08
Celda
La unidad ms pequea de una tabla es la celdas. En los ficheros de HTML las tablas se pueden utilizar para introducir datos numricos, textos, imgenes, etctera. Las tablas se componen de columnas (lneas de celdas verticales) y filas (lneas de celdas horizontales). A diferencia de las tablas que se pueden encontrar en otras aplicaciones, las de HTML no permiten realizar clculos con su contenido.
08
Por el contrario, con el comando el aspecto resultante ser el siguiente:
Texto completo?
Si el resultado no ha sido igual al que puedes observar sobre estas lneas, conviene que compares tu cdigo con el cdigo completo que puedes encontrar aqu .
Mejorar el layout con la ayuda delas tablas

Las tablas no slo son tiles para presentar resultados. En este apartado vers cmo utilizarlas para mejorar el aspecto de tus pginas. Insertars en la pgina,dentro de una columna adicional, informacin general as como una direccin y un nmero de telfono. Para ello tendrs que utilizar el fichero con el que ya has trabajado en anteriores entregas de este curso. Si no lo tienes,podrs encontrarlo en la pgina 77 del nmero 40 de Computer Hoy
N 41
A continuacin vas a colorear la columna de la izquierda para resaltarla del resto. Para ello debes usar el comando
,
Frame
Sirve para presentar en un mismo documento varias pginas a la vez, quedando limitadas por unos bordes que, en algunos casos, pueden ser modificados por el usuario. Es un componente muy utilizado ya que permite presentar la informacin de un modo claro y ordenado.
que ya debera resultarte familiar y que en este caso colorea la celda con un marrn claro. Finalmente slo te queda asignar a la celda una anchura de 150 puntos. Por tanto, para la segunda columna, quedan 600 puntos menos 150 puntos, es decir 450 puntos. El mismo navegador ya calcula ese valor, por lo que no tendrs que introducir ningn valor para la segunda columna.
Si deseas que el texto de la columna sea algo ms pequeo y prefieres otro tipo de letra, tendrs que
64
Profesional
pulsar la tecla C y escribir el siguiente texto: Puedes leer ms sobre el tag en la anterior entrega de este curso.
8 9
Para que el texto dentro de la celda aparezca con el tipo de letra adecuado, pulsa C y escribe: Con respecto al contenido de la celda de la derecha no tienes que modificar nada. Slo te queda desplazar el cursor con la ayuda de la tecla & hasta el final del cdigo fuente.
10
Pero a la columna todava le falta algo de contenido. Pulsa la tecla C e introduce las lneas de cdigo exactamente tal y como te indicamos a continuacin.
Presiona la tecla C y escribe el siguiente texto: . Con ello cerrars la celda e indicars al navegador que has alcanzado el final de la tabla. click sobre y sobre . Para cerrar el editor tan solo tendrs que pinchar sobre . Seguidamente haz doble click sobre la carpeta en la que se encuentre guardado el fichero, que en este caso ser Haz

Parmetros de las tablas
Con definirs los bordes de la tabla. En caso de que desees no incorporarlos, bastar con que omitas este parmetro, y as no se dibujarn. es el parmetro que permite indicar al navegador la distancia que, dentro de cada celda, debe establecerse entre el texto y los bordes. El color de fondo de la tabla, de una fila, o de una sola celda, se indica mediante el parmetro . Con podrs fijar el ancho de una tabla o de una celda. es el parmetro que tendrs que utilizar para indicar que deseas que el contenido de una celda se site en la parte superior de la misma. Tambin puedes asignar un fondo a cada celda con el parmetro .
11
Elementos bsicos de las tablas

que indica al navegador que a continuacin viene una tabla, mientras que se encuentra al final de la misma para indicrselo al navegador. Las etiquetas o tags, para construir las filas de la tabla, son para iniciar una fila, y para marcar el final de la misma. Los tags para delimitar cada una de las celdas que forman la tabla son para su comienzo, y para indicar su final. Tu tabla puede contener encabezados, facilitando as la lectura de los datos contenidos en ella, los tags que tendrs que utilizar sern , que indicar al navegador el principio del encabezado, y que seala el final de la misma.
y despus haz click sobre .
12
Encontrars un enlace que es muy comn en Internet. ste hace posible que cualquiera que visite tu pgina te pueda mandar un correo electrnico con slo hacer click sobre l. Si el visitante hace click sobre esta lnea, automticamente se abrir su programa de correo electrnico con un nuevo mensaje que tendr en la barra de destinatario tu direccin, es decir, aquella que has puesto tras : (la direccin que has puesto en este ejemplo es la de Computer Hoy. Evidentemente, cuando realices tu propia pgina tendrs que introducir tu direccin de correo y no la de Computer Hoy). Para que el navegador sepa que vas a terminar con la tabla, tendrs que hacer click exactamente en este punto
Aqu puedes ver el resultado final con el navegador . Cierra el navegador Internet Explorer con un click sobre . Con esto termina esta entrega del curso. En las prximas entregas dars un repaso a los frames 09 (Pg. 64) , ya que con estos elementos organizars mejor los contenido de tus propias pginas web.
13
Despus viene la segunda celda, que debe contener todo lo que ya se encontraba en la pgina. Pulsa dos veces la tecla C y escribe el texto siguiente: El parmetro slo lo pondrs por precaucin en el caso de que la columna de la derecha sea ms larga, para que el contenido de la celda se quede en la parte superior. Con esta instruccin le asignars un fondo a la celda. En este ejemplo el fondo de la celda se corresponde con el fondo de la pgina.
66
N 41
Profesional
Preparacin Definicin de los frames Frames en cascada
66
67
68
Algunos diseadores web enmarcan sus pginas para que sean ms vistosas y fciles de usar. Por eso, enComputer Hoy te indicamos paso a paso cmo insertar marcos y te damos consejos para colocarlos correctamente.
35 37 38 39 40 41 42 43 44 45 46 47 48
n el anterior captulo del curso de creacin de pginas web en HTML 01 aprendiste a utilizar tablas para mejorar el apecto de tus pginas cuando escribes texto. En esta entrega te explicaremos el funcionamiento de los frames 02 , que en castellano se puede traducir como bordes o marcos. Los frames dividen la ventana del navegador 03 en varias zonas donde se muestran distintos documentos al mismo tiempo. En el siguiente ejemplo vers como se pueden exhibir a la vez dos pginas HTML.En la parte izquierda de la pantalla vas a presentar una lista de hipervnculos 04 que te permitirn acceder a los docu66
mentos que aparecern en la parte derecha. Para realizar esta prctica utilizars las pginas que has creado en los captulos anteriores. Si no tienes estos ficheros, no te preocupes. Tambin puedes hacer el ejercicio con otras pginas, pero tendrs que realizar algunos cambios, como en el nombre de los ficheros en los hipervnculos.
creado en anteriores captulos del curso. Para disear esta pgina gua utilizars de nuevo el archivo de plantilla que creaste en el segundo captulo del curso (ver Computer Hoy n37, pg. 74).
Preparacin
Antes de comenzar a crear frames debes preparar las pginas que van a quedar dentro de los bordes o marcos. En esta ocasin, slo debes organizar la pgina gua, ya que todas las dems son las que has
Ejecuta el editor haciendo click en el men y llevando el puntero hacia , y . Haz click de nuevo. Si has seguido las anteriores entregas del curso,tal vez tengas el icono
Para abrir la plantilla haz click en las opciones y de la ventana del editor. Pulsa sobre y selecciona la opcin del men desplegable. Despus haz click sobre y el botn . El archivo se cargar en el editor .
Con unos simples clicks sobre las opciones y podrs guardar el fichero con el nombre .
Primero haz click a la derecha de y, sin soltar el botn, arras-
en el Escritorio 05 , que te permitir acceder directamente al editor.

N 42

tra el puntero hacia la parte izquierda, de forma que la lnea quede seleccionada: .
Profesional
Slo te faltan un par de lneas para terminar y comenzar a probar la pgina. Pulsa la tecla $ y escribe el cdigo . La primera lnea es el identificador de cierre del frame y la segunda cierra todo el documento.
01
HTML
A continuacin escribe las siguientes lneas de cdigo fuente 06 (Pg 68) : Como puedes ver, se trata de un documento que slo tiene enlaces que te llevan a los ejemplos de las entregas anteriores del curso. El nico parmetro 07 (Pg 68) nuevo que has utilizado es ste: . En el siguiente apartado te explicaremos detalladamente su funcionamiento. Guarda el fichero haciendo click sobre las opciones y . Despus cierra la ventana pulsando en . rmetro especifica que en la parte izquierda se debe construir una columna con un ancho fijo de 150 puntos y que la segunda columna ocupar el resto de la pgina.Si quieres, puedes insertar ms columnas escribiendo su anchura separada por comas. Por ejemplo: introduce una columna de 100 puntos de ancho en la parte izquierda y otra de 200 puntos en la derecha. Los puntos sobrantes quedarn asignados a una columna central que puede tener una anchura variable. En este ejemplo tienes suficiente con dos columnas. Adems debes escribir un segundo parmetro. Con indicas al navegador que se eliminen las separaciones entre los bordes de cada marco. de los ficheros cuyos enlaces se encuentran en la pgina que has creado en el primer apartado. Si te fijas en los hipervnculos de este fichero vers que tienen el parmetro: . La traduccin de Target al castellano es Destino.Es decir, el enlace apunta al marco que tiene como nombre contenido (el de la derecha) para mostrar la pgina. De forma que el contenido del marco derecho se define realmente en la pgina que es la que se muestra en el marco izquierdo. Tambin has utilizado el parmetro que define el valor inicial de cada marco cuando se presenta la pgina en el navegador. Cuando hagas click sobre los enlaces que aparecern en el marco izquierdo del navegador, el contenido de la parte derecha desaparecer para ser reemplazado por el documento HTML de la seleccin.
Para terminar debes guardar el fichero. Haz click en las opciones y .Se abrir una ventana en la que debes escribir el nombre de fichero y pulsar el botn . Para cerrar el Bloc de notas haz click en . Si deseas ver el resultado haz doble click en la carpeta:
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. En l se definen la posicin, forma y funcionamiento de las imgenes, los textos y los hipervnculos incluidos en la pgina web.
02
Frames
Definicin de los frames

Ahora vas a crear un Frame-Set 08 (Pg 68) . Este elemento, adems de dividir la ventana del navegador en diferentes reas, determina en qu zona debe aparecer cada uno de los documentos.
Son marcos o cuadros que se utilizan para mostrar varias pginas a la vez dentro de la misma ventana. Cada frame puede contener un documento HTML distinto u otros frames. Lo ms habitual es colocar un frame en la parte izquierda con los hipervnculos de la pgina.
03
que se encuentra en el Escritorio y en el archivo:
Navegador
. Puede que el resultado no sea espectacular, pero es muy prctico .
Si tienes abierto el Bloc de notas puedes empezar directamente por el paso 2. En caso contrario, tendrs que abrirlo haciendo doble click sobre el icono
Programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utiliza para descargar ficheros o ver contenidos multimedia. En la actualidad, los navegadores que se utilizan ms frecuentemente son el Explorer, de Microsoft, y el Navigator, de Netscape.
04
Hipervnculo
que se encuentra en el Escritorio.
En esta ocasin no te hace falta abrir el fichero de plantilla. Simplemente debes escribir esto: .
Seguro que las cuatro primeras lneas de cdigo te resultan muy familiares.Son las mismas que aparecen en todos los archivos HTML. Pero no has utilizado el identificador 09 (Pg 68) ,ya que en este tipo de documento no tiene ningn sentido. En su lugar aparece la entrada para indicar al navegador cmo se debe dividir la ventana.El pa-
Con la lnea anterior has definido el aspecto de la ventana del navegador. Pero todava faltan algunos detalles.Pulsa la tecla $ y escribe las lneas . La entrada se encarga de definir con qu se rellenar cada marco. El parmetro , que viene de source, indica el fichero HTML que debe insertarse en el marco.En este ejemplo se trata del fichero que creaste en el primer apartado. A continuacin se escribe el parmetro . Echa un vistazo a la segunda lnea de cdigo: . Gracias a este nombre el navegador reconoce la ubicacin
Para comprobar el funcionamiento de los marcos haz click sobre y vers como aparece la pgina en la parte derecha de la ventana.
Tambin se conoce como enlace. Es una referencia a otra pgina que se encuentra en la red Internet. Se suele distinguir por tener un color distinto al resto del texto, estar subrayado o representado por una imagen. Al hacer click sobre l, el navegador carga la pgina correspondiente.
05
Escritorio
Superficie de trabajo de Windows 95 y 98. En ella puedes dejar todo tipo de ficheros y aplicaciones para que estn accesibles en cualquier momento. En el Escritorio se encuentran los iconos ms importantes del sistema, como el de Mi PC, la Papelera de reciclaje, Mis documentos o la barra del men inicio.
N 42
67
Profesional
06
Cdigo fuente
Serie de instrucciones y comandos de programacin que se utiliza para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo emplean los programadores para referirse a los archivos que poseen las instrucciones de un programa.
07
Cierra el navegador Internet Explorer con un click sobre . Si lo deseas puedes mejorar el aspecto de la pgina realizando algunos cambios en el fichero navegacion.html. Por ejemplo, puedes cambiar el color de los caracteres o poner una imagen de fondo siguiendo los pasos que te hemos indicado en las entregas anteriores.
Esta lnea crea un nuevo Frame-Set. En este caso aparece la expresin que indica al navegador que el nuevo marco debe dividir la ventana horizontalmente.
v Divide la ventana del navegador en dos marcos verticales.El de la parte izquierda tiene un ancho de 150 puntos y el de la derecha todo el espacio que sobre. Rellena el primer frame (el de 150 puntos de ancho) con el contenido del fichero navegacion.html y lo llama nav. V Dentro del segundo marco se abre otro frame-set que divide horizontalmente la zona de la derecha asignando una altura de 50 puntos para el marco superior. La parte inferior tendr el resto de espacio disponible. Estas dos lneas de cdigo rellenan los dos marcos horizontales.
Para terminar se completan

las dos secciones de frame-set con sus identificadores de cierre correspondientes. Algunas lneas han sido desplazadas hacia la derecha utilizando la tecla . Esto no es imprescindible para que el cdigo funcione correctamente, pero es una prctica bastante habitual en los programadores, ya que permite hacer el cdigo ms legible.
Pulsa las teclas $ y y escribe .
Parmetro
Frames en cascada
Un frame se puede guardar a su vez dentro de otro frame. Esto quiere decir que dentro de un marco podrs incluir otros.El resultado son unas estructuras que pueden llegar a ser bastante complejas. En el siguiente ejemplo vers cmo se hace.
Ya sabes lo que significa. Coge el fichero externo.html y lo inserta en el marco de nombre externo que acabas de crear.
Informacin que determina el funcionamiento de un programa. Tambin se conoce como argumento. Los parmetros pueden tener valores de todo tipo. Por ejemplo: nmeros, textos, expresiones o incluso el nombre de un archivo. Estos valores siempre van acompaados de una instruccin o un identificador HTML que indica qu es lo que se debe hacer con ellos.
08
7 8 9
Seguidamente, y en este orden, presiona las teclas N, ( y . As pasas a la siguiente lnea e introduces un tabulador.
10 11
Para guardar el fichero haz click sobre y .
Pulsa las teclas N , $ y para crear otra lnea donde debes escribir el identificador de cierre . Cuando termines, el documento al completo debe tener un aspecto similar a este:
Finalmente tienes que crear el fichero externo.html. Para hacerlo repite el paso 2 del aparta-
v V
Inicia el Bloc de notas haciendo doble click sobre: .
Frame-set
Archivo donde se definen los frames que tendr la pgina. Debe especificar el tamao y posicin de cada marco e indicar los documentos HTML que sern presentados en ellos. Tambin puede contener otros frame-sets.
09
Haz click en las opciones y .Se abrir una ventana en la que tienes que pulsar sobre la pestaa de la parte inferior y seleccionar la entrada . A continuacin debes hacer doble click sobre el icono del fichero .
do anterior. Pero al guardarlo utiliza el nombre .
12
Y el resultado debe ser el siguiente: la ventana del navegador se divide primero verticalmente y despus el rea derecha se parte horizontalmente. Cuando el navegador interprete el fichero lo har de la siguiente manera:
Identificador
10
A continuacin se abrir el fichero . Haz click sobre y sobre . Escribe el nombre de archivo y pulsa el botn . Haz click justo detrs de y pulsa la tecla $ .
A continuacin repite el paso 3 del apartado Preparacin y escribe las instrucciones siguientes:
13
X
En la barra de men haz click sobre las opciones y .
Conviene usar frames?

tre tantas opciones. Adems, la creacin de este tipo de pginas resulta ms compleja para el diseador. A algunas empresas no les gusta nada que enmarquen sus pginas dentro de un frame (ver apartado Frames en cascada). Para evitarlo, utilizan unos destructores de frames que eliminan todos los marcos de la pgina para que sus contenidos aparezcan ocupando toda la ventana del navegador. En la undcima parte del curso aprenders a programar estos destructores de frames.
4 5
Webmaster
Presiona la tecla y escribe estas lneas de cdigo:
A los diseadores de pginas web tambin se les llama webmasters. Cuando completes este curso de programacin en HTML tendrs todos los conocimientos necesarios como para considerarte un webmaster profesional.
No todos los diseadores de pginas HTML utilizan los frames. Para algunos son una herramienta imprescindible, mientras que para otros resultan superfluos. Cada uno tiene su parte de razn. Por un lado, si se utilizan con moderacin, pueden ser muy tiles porque simplifican mucho el diseo de las pginas web y hacen que sean mucho ms claras. Pero si se abusa de ellos pueden llegar a resultar molestos. Las pginas con muchos frames favorecen que el visitante se pierda en-
68
N 42
Profesional
Cierra el Bloc de notas pulsando sobre .
que utilizaste en la anterior entrega del curso .
14
peta
Para terminar haz doble click sobre la car-
16
y el icono
15
El resultado debe ser ste . Si haces click sobre el enlace mientras ests conectado a Internet, vers como el marco derecho de la ventana de tu navegador muestra la pgina del popular buscador . Si por el contrario haces click sobre aparecer el fichero de ejemplo
!
Puedes seguir probando con el resto de enlaces que aparecen el el marco izquierdo. Cuando termines cierra la ventana del navegador haciendo click sobre . Si consigues dominar el funcionamiento de los frames puedes considerarte un autntico experto en programacin HTML. Pero todava te quedan muchas opciones interesantes por aprender. Por ejemplo, debes saber cmo se puede introducir un formulario en un documento web. De esta forma, los visitantes podrn escribir datos en tus pginas para mandarlos al webmaster 10 (Pg. 68) .
Consejos con los frames

Un nmero mayor puede hacer hace que la pgina se convierta en un autntico caos. Ten en cuenta que cada frame debe ser lo suficientemente grande para presentar el documento HTML que deseas meter dentro. Consejo 3: en vez de espuecribir des indicar el valor en tanto por ciento. Por ejemplo, con el navegador asignar un diez por ciento de la ventana para el primer frame y dejar el noventa por ciento restante para el segundo marco.

Tras estos dos parmetros hay que indicar los valores que especifican el ancho del frame. Estos argumentos se pueden expresar en puntos de pantalla o en tanto por ciento. El smbolo especial sirve para asignar al frame correspondiente todo el espacio de la ventana que deja libre el frame anterior. El nmero de frames debe ser igual al nmero de valores separados por una coma que se hayan introducido. Por ejemplo, genera tres frames.
Ya sabes cmo insertar frames. Ahora te daremos unos cuantos consejos para que los utilices correctamente: Consejo 1: los frames son muy prcticos para simplificar la navegacin dentro de pginas, pero no hay que utilizarlos para mucho ms. Si por razones estticas deseas dividir tu pgina, te recomendamos utilizar las tablas. En la sexta entrega del curso (Computer Hoy n 41 pg. 62) viste cmo disear una pgina utilizando tablas. Consejo 2: no dividas tu pgina con ms de tres marcos. 70
Aqu encontrars un pequeo resumen de esta entrega del curso.
Frames encadenados
Los frames pueden contener a otros frames a la vez. Esto significa que, dentro de un frame, en vez de un documento HTML, se puede insertar otro frame-set. Este frame-set vuelve a dividir el espacio del marco dentro de los bordes que lo delimitan. En general, el uso de frames puede resultar muy til para organizar tus pginas, pero no debes abusar de ellos, ya que complican mucho el diseo y manejo de las pginas.
Frame-set
Los frames (marcos) se definen en un fichero propio que se llama frame-set. Este debe hacer referencia a los documentos HTML que contiene.
Divisin
Los frames se pueden dividir de dos formas: verticalmente con: horizontalmente con:
N 42
Profesional

Definir un diseo Formulario activo Formularios ms avanzados Resumen de este captulo 76
78
78 80
Insertar un formulario en tu pgina web es la forma ms fcil de conseguir que los visitantes puedan ponerse en contacto contigo y mandarte cualquier tipo de informacin o sugerencia a travs de un mensaje de correo electrnico.
n la anterior entrega del curso HTML 01 aprendiste a utilizar los frames 02 , que te permiten mostrar varios documentos a la vez en una misma ventana del navegador 03 . En esta ocasin nos centraremos en el tema de los formularios. Para hacerlo vas a comenzar escribiendo el cdigo fuente 04 de un ejemplo sencillo que permitir a los visitantes de tu pgina enviarte un mensaje de correo electrnico 05 .
sitantes de tu pgina podrn escribir datos para mandarte un mensaje de correo electrnico.
Ejecuta el Bloc de notas haciendo click en y llevando el puntero hacia , y . Haz click de nuevo. Si has seguido las anteriores entregas del curso,tal vez tengas el icono
plantilla que creaste en la segunda entrega del curso (ver Computer Hoy n 37, pg. 74). Si no la tienes puedes optar por teclear el texto que aparece en el siguiente punto.
35 37 38 39 40 41 42 43 44 45 46 47 48
botn
y pulsar sobre el . Mantn presionado el botn y desplaza el puntero hacia la izquierda,de forma que la lnea de cdigo quede seleccionada: .
Definir un diseo
Lo primero que hars es analizar la estructura bsica de un archivo HTML con un formulario. Despus insertars dos campos donde los vi76
en el Escritorio 06 (Pg. 78) , que te permitir acceder directamente.
Para disear el formulario te va a hacer falta la
Abre la plantilla haciendo click en la ventana del editor sobre y . Seguidamente pulsa sobre la pestaa y selecciona la opcin . Finalmente haz doble click sobre . El fichero de la plantilla aparecer en la ventana del editor . Haz click sobre y . Aparecer una ventana en la que debes rellenar el apartado escribiendo
N 43
Haz click con el botn izquierdo del ratn justo en este punto .
Escribe el identificador 07 (Pg. 78) y pulsa la tecla $ . Este comando indica al navegador que las siguientes lneas de cdigo, hasta el identificador de cierre , son un formulario.
Foto: Stock Fotos S.L. Montaje: Computer Hoy.

!
Profesional
Escribe estas dos lneas de texto . Con la primera das la orden de mostrar el ttulo del primer elemento del formulario en negrita. En la segunda utilizas el identificador para definir el formato del campo de entrada 08 (Pg. 78) . El navegador sabe que en este punto debe mostrar un recuadro para introducir datos. El argumento indica que se trata de una nica lnea de texto. El parmetro 09 (Pg. 78) te sirve para especificar la variable 10 (Pg. 78) donde se almacenar el valor de entrada del campo.Finalmente con indicas al navegador que el ancho del campo es de 30 caracteres. Por cierto, no necesita identificador de cierre.
, que permitir asignar el texto que se introduzca en el campo del mensaje a una variable.
Formularios y Javascript
tal manera que al hacer click sobre ellos aparezcan determinados datos en la ventana del navegador. Los conocimientos de Javascript necesarios para realizar este tipo de aplicaciones los vers en la undcima entrega del curso HTML (Computer Hoy n 46).
01
HTML
8 9
Pulsa la tecla $ y escribe el identificador de cierre .
De momento slo has creado un pequeo campo que permitir introducir una direccin de correo electrnico. El campo que permitir introducir el texto del mensaje debe tener un tamao bastante ms grande. Para crearlo debes pulsar la tecla $ y escribir las siguientes lneas de cdigo .
Todava te falta una parte que se encargue de indicar al navegador cundo se han introducido todos los datos del formulario. Presiona la tecla $ y escribe estas dos lneas de cdigo . Con ellas se realiza un salto de lnea y se dibuja un botn.Cuando los usuarios que visiten tu pgina escriban en ella un mensaje tendrn que pulsar este botn para mandar los datos. Para crearlo has utilizado el identificador acompaado del parmetro . Submit se puede traducir al castellano como enviar. Despus aparece el argumento que determina el texto que se ver escrito dentro del botn. Pulsa la tecla $ e introduce el identificador de cierre . El cdigo fuente al completo tiene el siguiente aspecto .
Los formularios no slo son tiles para recopilar y enviar datos, tambin puedes hacer otras muchas cosas. Te resultarn perfectos para visualizar en tus pginas aquellos datos que piensas modificar con Javascript. Por ejemplo, puedes programar los botones de
Significa Hypertext Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. Con l se definen la posicin, forma y funcionamiento de las imgenes, los textos y los hipervnculos incluidos en la pgina web.
02
Tras el signo de interrogacin aparecern el nombre y el contenido de cada campo. Por ejemplo, se habr convertido en y, dependiendo de lo que hayas tecleado con anterioridad en el formulario, aparecer un texto u otro a continuacin. En realidad esta indicacin de la barra de direcciones est pensada para ser pro-
cesada por un programa que debe ser indicado junto al identificador . En este ejemplo no lo has hecho y el resultado de las entradas aparece en el campo de direcciones. En el siguiente apartado vas a ver cmo puedes enlazar tu formulario con un programa.
Frames
14
Antes de comenzar debes cerrar la ventana del Explorer haciendo click sobre .
Marcos o cuadros que se utilizan para mostrar varias pginas a la vez dentro de la misma ventana. Cada frame puede contener un documento HTML distinto u otros frames. Lo ms habitual es colocar un frame en la parte izquierda con todos los hipervnculos de la pgina.
03
Navegador
10
Programa que permite visualizar el contenido de las pginas web de Internet. Tambin se utiliza para descargar ficheros o ver contenidos multimedia. En la actualidad, los navegadores que se utilizan ms frecuentemente son Explorer, de Microsoft, y Navigator, de Netscape.
04
Cdigo fuente
La primera instruccin realiza un salto de lnea. Despus escribes el ttulo del elemento en negrita y vuelves a saltar una lnea para que el documento sea ms legible. A continuacin viene un bloque de texto que est definido con la orden . Los siguientes dos parmetros: para el nmero de columnas y para el nmero de filas, te deben resultar familiares, ya que fueron tratados en la anterior entrega de este curso. En este caso, sus valores sirven para determinar el tamao del recuadro donde se podr escribir el mensaje.Es decir, el navegador reservar un ancho de 40 caracteres y una altura de 10 para este campo de entrada de texto. An queda el parmetro
11 12
Haz click sobre las opciones y . A continuacin cierra el Bloc de notas pulsando sobre . Haz doble click sobre la carpeta
Serie de instrucciones y comandos de programacin que se utiliza para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo emplean los programadores para referirse al archivo que posee las instrucciones de un programa.
05
que se encuentra en el Escritorio. Dentro de ella haz otra vez doble click sobre el icono
Correo electrnico
13
ste es el aspecto final que tendr la pgina . Si lo deseas, puedes rellenar los campos y hacer click sobre el botn . En la lnea de direccin aparecer, por ejemplo .
N 43
Sistema que permite enviar y recibir textos a travs de la red Internet. Los mensajes de correo electrnico tardan unos pocos segundos en llegar al buzn del destinatario desde donde pueden ser descargados en cualquier momento, y pueden llevar adjuntos ficheros de todo tipo: fotos, msica, pelculas.
77
Profesional

Formulario activo
Las siguientes lneas de cdigo darn vida a tu formulario. Slo necesitas una direccin de correo electrnico y un programa que gestione los datos. En nuestro ejemplo vas a utilizar un servicio de libre acceso que permite gestionar gratuitamente los formularios. Lo puedes encontrar en la direccin de Internet - v . Su funcionamiento es muy simple: el visitante de tu pgina de Internet rellena tu formulario.Tras hacer click en el botn , tu pgina web se pone en contacto con el servidor. Este servidor utiliza un programa que recoge los datos del formulario y los remite, va correo electrnico, en el mismo orden que han sido introducidos, a tu direccin de e-mail.
06
Escritorio
Superficie de trabajo de Windows 95 y 98. En ella puedes dejar todo tipo de ficheros y aplicaciones para que estn accesibles fcilmente en cualquier momento. En el Escritorio se encuentran los iconos ms importantes del sistema, como el de Mi PC, la Papelera de reciclaje o Mis documentos.
07
mente haz doble click sobre el fichero para abrirlo.
Formularios con CGI

inters. Slo tiene que ser capaz de entenderse con la pgina web que enva los datos. A su vez, el programa devuelve un resultado al usuario que cumplimenta el formulario. Este resultado se muestra en el navegador utilizando una pgina web. Puede ser un mensaje de error, la confirmacin del envo de un correo electrnico, el resultado de una consulta a una base de datos o una operacin matemtica. No no todos los servidores de Internet ofrecen a sus usuarios un interface CGI y por tanto no todos permiten utilizar formularios.
Haz click justo detrs del comando . Pulsa la tecla de la barra de espacio ( ) e introduce el siguiente texto: . El parmetro indica al navegador dnde tiene que remitir los datos del formulario y especifica que se trata de un correo electrnico.
Identificador
08
Para que el formulario llegue a tu direccin de correo debes escribir otra lnea de cdigo. Haz click justo en este punto y pulsa la tecla $ . A continuacin escribe el siguien-
Para gestionar un formulario hace falta un programa que procese los datos. Esta labor la realizan los programas CGI, siglas de Common Gateway Interface, que se puede traducir al castellano como Interface comn para la transmisin de datos. El CGI es un programa que recoge la informacin del usuario y la prepara para enviarla por e-mail. Da igual de qu tipo de programa se trate o en qu lenguaje est programado. Puede tratarse de una base de datos, un programa que mande mensajes o que calcule los tipos de
Inicia el Bloc de notas con un doble click sobre: te texto . El identificador es un campo de entrada. Pero en esta ocasin aparece con el parmetro . en castellano significa oculto. Esto implica que los campos no van a aparecer en el formulario, ya
Campo de entrada
.
Recuadro que aparece en algunas pginas web para que los usuarios que las visitan puedan cumplimentarlo con datos. Posteriormente toda la informacin que se introduzca en la pgina se procesa por un programa que enva las entradas a una direccin de correo electrnico.
09
Haz click sobre y . Despus pulsa la pestaa y selecciona la opcin . Final-
que el remitente no ha de conocer cul es tu direccin de correo electrnico. Tambin es muy importante el parmetro . Esta indicacin es utilizada por el programa para poder saber en qu lnea se espe-
cifica tu direccin de correo electrnico. Esta informacin se aade justo detrs de .Ten en cuenta que en este caso es un dato de ejemplo. Para que todo funcione correc-
Parmetro
Adems de los campos de texto que has visto en el formulario de este ejemplo, existen otros sistemas que permiten introducir datos. Por ejemplo, las listas despegables que facilitan al usuario seleccionar un valor determinado entre las opciones de una lista o los controles de seleccin con los que podrs presentar en pantalla varios elementos que se pueden seleccionar pulsando sobre ellos. El cdigo fuente de una lista despegable tiene el siguiente aspecto . Con le indicas al navegador que lo que viene a continuacin es una lista desplegable que contiene varios elementos entre los que se debe seleccionar uno. El nombre es muy importante.
Formularios ms avanzados
mentos tiene el aspecto siguiente . Como ya sabes, el identificador sirve para indicar que a continuacin hay un campo para introducir datos. El siguiente parmetro es y se utiliza para determinar el aspecto del campo. Con esta indicacin ests generando una casilla vaca, mientras que con y vuelves a determinar con qu valor y con qu nombre se pasa la variable al programa que procesa el formulario. El resultado obtenido con este ejemplo debe ser similar a este: .
Es una informacin que determina el funcionamiento de un programa. Tambin se conoce como argumento. Los parmetros pueden tener valores de todo tipo. Por ejemplo: nmeros, textos, expresiones o incluso el nombre de un archivo. Estos valores siempre van acompaados de una instruccin o un identificador HTML que indica qu es lo que se debe hacer con ellos.
10
Variable
Elemento de un programa que contiene un dato que puede variar en tiempo de ejecucin. Por ejemplo un nmero, texto, fecha o cualquier otro tipo de informacin.
Este parmetro es el que ser utilizado como nombre de variable para devolver el resultado de la seleccin. son las distintas posibilidades que aparecern en la lista para poder escoger. A continuacin viene , que es el valor que ser almacenado en la variable en el caso de que la opcin sea seleccionada y , que es el texto que aparecer en el men para que puedas seleccionarla con el ratn. Si realizas este ejemplo correctamente obtendrs el si-
guiente resultado
Estas listas desplegables son muy prcticas cuando deseas que los visitantes de tu pgina puedan seleccionar entre las opciones que les ofreces. Otro elemento importante en los formularios son las cajas de seleccin, unas pequeas casillas que el usuario puede activar con un simple click de ratn . El cdigo fuente de estos ele-
78
N 43
Profesional
tamente debes introducir tus datos reales. Si no lo haces, no recibirs ningn formulario. Para evitar que te bombardeen con molestos mensajes publicitarios, puedes crear una direccin de correo gratuita y utilizarla para realizar este ejemplo. Para crear una cuenta e-mail de este tipo puedes consultar las pginas web - o 3 V (existen cientos de pginas similares) donde encontrars toda la informacin necesaria.
Para ver el resultado haz doble click sobre la carpeta
Unos instantes ms tarde aparecer un texto indicando que el mensaje es correcto y se encuentra en camino . Cierra Internet Explorer haciendo click en .
Los formularios hacen posible que los visitantes de tu pgina se pongan directamente en contacto contigo. En la siguiente entrega del
curso se har un repaso a los identificadores ocultos, ya que, aunque estos comandos no se ven en la pgina, resultan muy tiles.
y el fichero .
El texto completo tiene el siguiente aspecto . Haz click sobre las opciones y . Cierra el Bloc de notas pulsando sobre .
A primera vista no parece que existan muchas diferencias con la versin del apartado anterior . Pero si rellenas los dos campos y haces click en el botn , mientras ests conectado a Internet, el parmetro entrar en funcionamiento y los datos sern remitidos a tu buzn de correo electrnico.
9 10
Conviene que unos minutos ms tarde eches un vistazo a la bandeja de entrada de tu correo electrnico.Debes encontrar un mensaje de este tipo , que podrs abrir haciendo doble click sobre l. En el mensaje de correo electrnico aparecern los datos que has introducido. Como puedes ver, el servidor ha incluido la direccin de correo electrnico . Esto te permitir contestar el mensaje inmediatamente.Tambin aparece el texto del mensaje .
X
11

escribe entre los identificadores y . Para que el formulario funcione correctamente necesitas utilizar un programa que gestione los resultados. El programa que vas a utilizar debe estar definido con el parmetro .
Como en otras ocasiones, a continuacin te mostramos un pequeo resumen con los contenidos ms importantes que han sido descritos en este captulo del curso de programacin HTML:
Cajas de texto
Cuando utilizas la orden puedes crear una caja para introducir varias lneas de texto. Con especificas la anchura en caracteres y con el nmero de lneas que tendr la caja de texto para escribir datos.
Formularios
Los formularios son pginas web con varios campos que deben ser rellenados por el usuario a travs del navegador. Posteriormente se debe pulsar un botn para que todos estos datos sean presentados o enviados a la direccin de correo electrnico que especifiques. El cdigo fuente de los formularios se
N 43
Entrada de datos
Para presentar un campo de entrada de datos debes utilizar el identificador . Si lo acompaas del parmetro indicars al navegador que a continuacin se presentar una pequea caja donde se podr introducir una lnea de texto.
Enviar los datos

Por ltimo debes crear un botn que permita enviar los datos cuando se termine de rellenar el formulario. Para hacerlo debes utilizar el identificador acompaado del parmetro .
Direcciones online
v www.melodysoft.com www.hotmail.es -V www.latinmail.com

-
80
Profesional
Para este captulo del curso no hace falta que compres una bola de cristal. Te bastar con aplicar los comandos ocultos del HTML que te explicamos a continuacin y conseguirs algunos efectos mgicos para tus pginas.
n el anterior captulo del curso de creacin de pginas web en HTML 01 aprendiste a disear formularios 02 para que los visitantes de tus pginas puedan enviarte datos a tu direccin de correo electrnico. En esta ocasin aprenders a usar identificadores 03 ocultos que te permitirn programar algunas rutinas. Estas se ejecutan automticamente cada vez que se cargue tu pgina y permiten definir algunas palabras clave 04 que ayudarn a los buscadores 05 a catalogar tu pgina web.
76
Los identificadores ocultos son instrucciones especiales de HTML. Al contrario que los identificadores que ya conoces, estos tienen funciones invisibles que no son mostradas directamente cuando se visualiza la pgina. Con ellos no podrs presentar textos ni establecer colores o tipos de letra, pero te permitirn dar algunas rdenes especiales al navegador 06 . El identificador oculto ms importante es . Con l podrs realizar las funciones que te indicamos a continuacin.
Abrir pginas automticamente

Con la ayuda del identificador podrs, por ejemplo, abrir un documento HTML a partir de otro documento HTML despus de un tiempo determinado. Puede que en un principio esto no te parezca interesante,pero te ofrece muchas posibilidades. Por ejemplo: hacer una presentacin (a modo de diapositivas), mostrar un mensaje de bienvenida en tu pgina de inicio 07 (Pg. 78) durante unos insN 44
Fundamentos: crear el primer archivo HTML Cmo disear y dar formato a los textos Para principiantes Listas, barras y vnculos Insertar imgenes Distintos formatos de escritura Divisin de pginas con tablas Para Insertar y dimensionar marcos expertos Ejemplo de formulario Para qu sirven los identificadores ocultos Conceptos bsicos del estilo en cascada Para profesionales HTML con Java Probando las pginas HTML Principios legales de las pginas de Internet
35 37 38 39 40 41 42 43 44 45 46 47 48
tantes o llevar a todos los visitantes a la direccin de Internet que t quieras. El siguiente ejemplo muestra una pgina HTML que tras cinco segundos presenta una segunda. Como es habitual, para realizar la prctica necesitas el archivo de plantilla que creaste en la segunda entrega del curso. Si no lo tienes,
puedes copiar el cdigo fuente 08 (Pg. 78) que aparece en el paso 2.
Para iniciar el editor haz doble click en .
Tambin puedes hacerlo siguiendo la siguiente ruta: , , y .
Foto: Stock Fotos S.L. Montaje: Computer Hoy.
Profesional
Haz click en la ventana del Bloc de notas sobre las opciones y . Despus pulsa el botn y selecciona el tipo de fichero . Haz doble click sobre el archivo . La ventana mostrar la plantilla .
la cuarta entrega del curso (puede ser cualquier otro). Este enlace puede resultar til para los visitantes que utilicen un navegador antiguo que sea incapaz de entender el identificador . Con cierras la orden de alineacin central.
Haz doble click sobre el icono
del Escritorio y despus en .
completa de un servidor de Internet 12 (Pg. 78) a otro. O deseas cambiar el nombre de todas tus pginas para seguir un esquema concreto. Qu pasar entonces con los visitantes que busquen tus pginas? Muy fcil, utili-
01
HTML
Para que la pgina funcione debes utilizar el comando . Pulsa la tecla y, sin soltarla, presiona H . A continuacin pulsa varias veces & hasta que el cursor 10 (Pg. 78) quede situado justo delante de .
Significa HyperText Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. Con l se definen la posicin, forma y funcionamiento de las imgenes, los textos y los hipervnculos incluidos en la pgina web.
02
Formularios
Haz click en las opciones y . Escribe y pulsa sobre el botn . Ahora vas a presentar un breve texto y dos imgenes que has utilizado varias veces en anteriores entregas del curso.Si no las tienes puedes utilizar otras,pero asegrate de que se encuentran en la misma carpeta que la pgina HTML. Haz click con el botn izquierdo en .
Pulsa la tecla $ y despus . A continuacin inserta la lnea . El identificador est acompaado por dos argumentos 11 (Pg. 78) : informa al navegador que debe refrescar el contenido de su ventana y indica cundo se producir el cambio y cul ser la pgina utilizada. significa contenido. Despus del signo aparecen dos elementos entre comillas y separados por punto y coma. Primero se indica el tiempo en segundos que el navegador debe esperar antes de abrir la nueva pgina, en este caso . Despus aparece el archivo HTML que debe utilizar. En esta ocasin se trata de , que es una pgina local almacenada en el disco duro, pero puede tratarse de cualquier otra pgina de Internet.
10
El navegador se abrir y mostrar la pgina . Al cabo de cinco segundos de espera accionar automticamente y presentar el segundo documento . Cierra el navegador Internet Explorer haciendo click en .
zando el identificador oculto podrs llevarles rpidamente hasta la pgina que desees. En el siguiente ejemplo te mostramos lo que debes hacer para seguir este procedimiento.
Algunas pginas web disponen de campos donde los visitantes pueden introducir datos para ser procesados por un programa que presenta un resultado o los enva a travs de correo electrnico al responsable de la pgina.
03
Identificador
11
Tendrs que utilizar de nuevo el archivo de plantilla. Repite los pasos 1 y 2 del primer apartado.
Direccionamiento inmediato
Imagina que no te queda ms remedio que desplazarte con tu pgina de inicio
A continuacin haz click en y . Aparecer otra ventana. En la casilla escribe y pulsa el botn .
El lenguaje HTML se escribe utilizando identificadores. Estos son rdenes que das al navegador para que muestre una pgina web tal y como deseas. Cada identificador es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos o cualquier otra propiedad de la pgina.
04
Palabras clave
Sin soltar el botn, mueve el puntero a la izquierda hasta que la lnea aparezca seleccionada .
Trminos que se introducen cuando se desea buscar un registro en una base de datos. Por ejemplo cuando deseas encontrar informacin en un buscador de Internet.
05
Buscadores
Escribe las lneas siguientes: . Con conseguirs que las imgenes aparezcan centradas en la pgina.A continuacin hay tres saltos de lnea, dos imgenes y un ttulo corto. Con la expresin
introducirs un hipervnculo 09 (Pg. 78) que apunta al documento HTML creado en
Con esto has terminado de disear la pgina. El cdigo fuente completo debe tener este aspecto: . Haz click en y para guardar los cambios. A continuacin cierra la ventana del Bloc de notas haciendo click en .
Sitios web que permiten buscar informacin en Internet. Para utilizarlos debes introducir las palabras clave con las que deseas realizar la bsqueda. Posteriormente aparecer una pgina con los resultados ordenados por importancia.
06
Navegador
Programa que permite visualizar el contenido de las pginas web de Internet. Tambin se puede utilizar para descargar ficheros de la Red o ver contenidos multimedia.
N 44
77
Profesional
World Wide Web
13
de tus pginas de Internet puedes seguir las instrucciones siguientes:
click sobre el fichero .
Red mundial de datos de Internet. En ella puedes encontrar informacin sobre innumerables temas. Lo ms importante es que toda la informacin est relacionada para facilitar la bsqueda de datos.
14
1 2
Repite el paso 1 del primer apartado.
A continuacin haz click en y . Pulsa sobre la pestaa y selecciona la opcin . Para abrir el documento haz doble
!
3 4
Haz click justo detrs de y pulsa $ . Escribe la siguiente lnea de programa: .
Indexar
Con , el navegador reconoce que a continuacin aparece una orden de configuracin para la pgina que est cargando.
significa expira, lo que indica que la pgina tiene una fecha de caducidad. Con , estableces que sta es inmediata. Si un navegador lee la pgina, recibir la orden de actualizarla con el contenido del servidor original la prxima vez que la busque.
notas pulsando sobre . En la siguiente entrega hablaremos de nuevo sobre la edicin de pginas web y aprenders a mejorarlos utilizando plantillas.
Online
Organizar una base de datos utilizando un criterio determinado. Por ejemplo, los buscadores de Internet indexan y organizan las pginas web por su contenido e importancia.
15
Haz click en y . Cierra el Bloc de
v www.yahoo.com www.excite.es -V www.webservicio.com

-
Generar identificadores <meta> automticamente
Algunos servidores de Internet te pueden ayudar a generar identificadores <meta>. Uno de ellos es: - V .
Proxy
Ordenador que acta como intermediario entre tu ordenador y la red Internet. Puede ofrecer algunos servicios adicionales de seguridad, administracin y cach. Normalmente se encuentra en el ISP, pero las empresas suelen tener un servidor proxy para conectar todos sus equipos a Internet utilizando una red interna.
16
Inicia el navegador de Internet haciendo doble click sobre: .
Para saltar hasta la lnea de direcciones del navegador pulsa la tecla % y sin soltar presiona la R . Escribe la direccin y pulsa $ . .
Haz click sobre el botn que se encuentra al final de la pgina. En unos pocos segundos aparecer un texto con los identificadores correspondientes . Con esta pgina se pueden generar algunos identificadores extra, aparte de los que te hemos explicado en este captulo.
ISP
Proveedor de servicios de Internet. Ofrecen a sus clientes una conexin a la red Internet, correo electrnico, chat, news y un telfono de consultas. Los gratuitos tienen algunas limitaciones y los de pago ofrecen ms servicios con mayor calidad.
17
3 4
Aparecer la pgina del metagenerador 18 . Introduce los datos en los campos unos detrs de otros, por ejemplo: . Si no deseas rellenar alguna casilla puedes dejarla vaca. Para acceder a la parte inferior de la pgina debes pulsar en el de la barra de desplazamiento del navegador.
Para seleccionar los identificadores, haz click con el ratn al principio de la primera lnea y, sin soltar, desplaza el puntero hacia la parte inferior derecha. Pusa y al mismo tiempo C para copiar el texto. Despus, abre el archivo de plantilla tal y como te hemos descrito anteriormente e inserta el texto haciendo click en y . Los identificadores deben quedar entre las lneas de comando y .
Cach
!
Parte del disco duro que utiliza el navegador para almacenar las pginas ms visitadas. De esta forma se evita el tener que transmitirlas a travs de la Red cada vez que quieres visitarlas y se muestran mucho ms rpido.
18

puedes colocar una gran cantidad de instrucciones del tipo .
Este es el resumen de los contenidos ms importantes de este captulo:
Meta-identificador Bsqueda El identificador tie- automtica

ne varias utilidades. Entre otras, se encarga de abrir automticamente documentos o ayuda a los buscadores a encontrar pginas. Si lo deseas, tambin ordena al navegador que abra un documento desde el servidor original en lugar de cargarlo desde la memoria intermedia. Entre los identificadores y se puede utilizar para abrir pginas automticamente. Con el comando indicas al navegador que debe volver automticamente al contenido actual . Indica el tiempo, en este caso cinco segundos, y especifica el documento que debe
abrirse. Un en lugar de activar el proceso de apertura de forma inmediata.
Tambin puedes registrar tu nombre .
Metagenerador
Ayudas de bsqueda
Los buscadores tienen en cuenta los identificadores para indexar las pginas. Para hacerlo brevemente se utiliza . Las palabras clave se pueden indicar con .
Bsquedas sin rodeos

Si actualizas con frecuencia los contenidos de tus pginas, puedes ordenar al navegador que, cada vez que la abra, elija la pgina directamente del servidor y no de la memoria intermedia. Para hacerlo debes utilizar .
Programa o pgina web en la que se introducen algunos datos para que genere el cdigo HTML de los identificadores <meta>.
80
N 44
Profesional
Foto: Fototeca 9x12 S. L. Montaje: Computer Hoy.

Tu primera hoja de estilo Variaciones de estilo Construccin de clases Resumen de este captulo 62
63
64 66 dades cada vez que quieras mostrar un texto.
n el anterior captulo del curso de creacin de pginas web en HTML 01 aprendiste a utilizar algunos identificadores 02 ocultos que te han permitido programar determinadas rutinas. Estas se ejecutan automticamente cada vez que se carga tu pgina en un navegador 03 y te permiten definir algunas palabras clave 04 que ayudarn a los buscadores 05 a catalogar tu pgina web. En esta ocasin vamos a tratar las hojas de estilo en cascada 06 (Pg. 64) que te ayudarn a mejorar el aspecto de tus documentos y conseguir una buena organizacin de tus pginas. Su funcionamiento es similar al de las plantillas 07 (Pg. 64) que se utilizan en los procesadores de texto, por ejemplo en Microsoft Word. Estos archivos contienen algunos aspectos relativos a la presentacin final de los documentos. As, por ejemplo, puedes guardar bajo el nombre de Arial-negrita una configuracin que utiliza el tipo de letra Arial combinado con el formato Negrita y un tamao de 14 puntos 08 (Pg. 64) . Cuando quieras recuperar esta configuracin, tan slo tendrs que seleccionar el nombre de la plantilla y podrs dar formato al texto automticamente.Esta herramienta resulta muy prctica ya que te evita el tener que configurar una a una todas las propie-
Tu primera hoja de estilo

Para realizar este primer ejercicio debes recuperar la plantilla que creaste en la segunda entrega del curso. Si no la tienes, puedes disearla introduciendo el cdigo fuente 09 (Pg. 64) que aparece en el paso 2.
Para iniciar el Bloc de notas pulsa en:
Si no encuentras este icono en el Escritorio 10 (Pg. 64) , puedes seguir la ruta , , y .
Haz click en y . Para ver todos los ficheros pulsa sobre el botn y selecciona . A continuacin haz doble click sobre . En la ventana aparecer el cdigo fuente de la plantilla:
Antes de ponerte manos a la obra, tendrs que guardar el fichero con otro nombre. Haz click en y .
Tan slo debes elegir la que ms te guste. Las hojas de estilo en cascada te permiten disear formatos de texto con distintos tamaos, colores y tipos de letra. Para usarlas, te bastar indicar la que necesites y conseguirs escribir muchas menos lneas de cdigo.
62
N 45
35 37 38 39 40 41 42 43 44 45 46 47 48

Escribe y pulsa . Por ejemplo, el tipo de letra Truetype 11 (Pg. 64 . La segunda lnea de cdigo fija el tamao de letra. Con indicas que ste es de 14 puntos. El parmetro 12 (Pg. 66) fija el color de la fuente. En este caso vas a utilizar el color azul.
Profesional
12
Haz doble click sobre el icono:
y selecciona .
01
HTML
Haz click justo detrs de... .....
que se encuentra en el Escritorio y luego en:
Para abrir el fichero haz doble click sobre la opcin .
y pulsa la tecla $ .
13
El navegador se abrir y mostrar la pgina
Ahora, vas a asignar las propiedades del identificador a uno nuevo que llamars . Para conse-
Despus introduce la siguiente lnea de cdigo: . El identificador indica al navegador que a continuacin aparece una plantilla de formato, y el parmetro que se trata de una hoja de estilo en cascada,CSS, son las siglas inglesas de Cascading Style Sheet.
8 9
Pulsa la tecla $ y escribe . Con esta lnea cierras el comentario que iniciaste en el paso 6. Pulsa de nuevo la tecla $ y escribe el identificador de cierre . Con esto has introducido todas las caractersticas de un nuevo formato. Para ejecutarlas, selecciona la lnea del cdigo fuente. Escribe las siguientes lneas de cdigo:
Significa HyperText Markup Language y es el lenguaje de programacin utilizado para crear las pginas de Internet. Con l se definen la posicin, forma y funcionamiento de las imgenes, los textos y los hipervnculos incluidos en la pgina web.
02
Identificador
Seguidamente, pulsa la tecla $ y escribe .Se trata del smbolo que indica el inicio de un comentario. De esta forma impides que los navegadores que no conocen los CSS representen el cdigo que viene a continuacin en pantalla. En el cuadro Utilizacin de comentarios de la pgina 64 puedes encontrar ms informacin sobre este tema. Vuelve a pulsar la tecla $ e introduce las siguientes lneas de cdigo:
10
Como puedes ver,slo el primer prrafo tiene el tipo de letra,tamao y color que has fijado con anterioridad. El segundo prrafo es el que no has escrito entre los identificadores y , por eso no ha experimentando variaciones.
guirlo, debes hacer click justo en este punto
El lenguaje HTML se escribe utilizando identificadores. Estos son rdenes que das al navegador para que muestre una pgina web tal y como deseas. Cada identificador es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos o cualquier otra propiedad de la pgina que quieras aplicar.
03
Navegador
Con fijas la configuracin del identificador . Esto significa que ms adelante, en el documento, todos los apartados que comiencen por y terminen por tendrn esta configuracin. Las instrucciones de formato van siempre precedidas por una llave y cada una de ellas separadas por punto y coma . Despus de la ltima tendrs que escribir la llave de cierre . La primera instruccin de formato es , con ella especificas el tipo de letra. En este caso hemos utilizado la fuente , aunque puedes usar cualquier otra. Debes recordar que siempre se debe escribir entrecomillada, incluso cuando el nombre est formado por varias palabras.
La parte del texto que est delimitada por los identificadores y aparecer con el formato que has definido anteriormente. El resto del prrafo debe mostrarse sin que se aplique ninguna plantilla. El cdigo fuente completo es el siguiente:
14
Para cerrar el navegador, haz click en .
Variaciones de estilo
Si has seguido todas las instrucciones del apartado anterior debes tener claro el funcionamiento de las hojas de estilo. Resumiendo, al principio del cdigo fuente defines un nuevo identificador que podrs utilizar ms adelante para fijar un tamao,tipo y color de letra especficos. Las hojas de estilo en cascada te brindan muchas ms posibilidades.Siguiendo los pasos que te vamos a indicar a continuacin podrs ampliar las propiedades de los identificadores de forma global o individual.
Simplemente tienes que escribir .De esta forma puedes asignar un formato a todos los identificadores que quieras.Tan slo debes introducirlos uno detrs de otro separndolos por una coma. Es decir, el identificador tiene asignados el mismo tipo, tamao y color de letra que el identificador . En un principio, esto puede ser absurdo, pero si realizas las modificaciones que te indicamos a continuacin conseguirs definir dos identificadores distintos utilizando muy pocas lneas de cdigo. Haz click justo al final de la lnea y pulsa la tecla $ . Escribe las siguientes lneas de cdigo:
Programa que permite visualizar el contenido de las pginas web de Internet. Tambin se puede utilizar para descargar ficheros de la Red o visualizar algunos contenidos multimedia comos sonidos, imgenes o incluso vdeos.
04
Palabras clave
Trminos que se introducen cuando se desea buscar un registro en una base de datos. Por ejemplo cuando deseas encontrar informacin en un buscador de Internet. Los trminos introducidos deben definir lo ms exactamente posible el trmino que se busca.
05
Buscador
11
Haz click en y . Despus cierra la ventana del editor pulsando sobre .
1 2
Haz click sobre y . Despus pulsa

N 45
En un principio has fijado el tamao de letra para el identificador y ahora lo has cambiado con . Esto puede parecer un poco extrao,pero es uno de los principios bsicos de las hojas de estilo en cascada. Las plantillas se pueden construir unas dentro de otras.
Sitio web que te permite localizar pginas de Internet relacionadas con el tema que desees. Para utilizarlo debes introducir las palabras clave con las que deseas realizar la bsqueda. Posteriormente aparecer una pgina con los resultados en orden de importancia desde donde podrs acceder a ellos pulsando sobre su enlace correspondiente.
63
Profesional

Esto significa que puedes dar formato a los identificadores tantas veces como desees,pero el nico vlido ser el ltimo que escribas. La razn principal para emplear esta metodologa es que puedes asignar un formato bsico para todos los identificadores y posteriormente cambiar las propiedades particulares de cada uno de ellos. Gracias a esta opcin podrs complementar fcilmente el diseo de unas plantillas con otras.
!
06
Hojas de estilo en cascada
Tambin se llaman CSS. Son plantillas que se pueden utilizar para crear documentos HTML y dar formato a los textos que se presenten en pantalla. Por ejemplo, determinar el tipo, tamao y color de la letra. Las hojas de estilo en cascada resultan muy prcticas, ya que permiten ahorrar lneas de cdigo y gestionar mejor la presentacin de texto.
07
Para comprobar el resultado, debes escribir algn texto utilizando el identificador . Haz click justo detrs de
Construccin de clases
De momento has aprendido a utilizar plantillas de estilo creando identificadores al principio del cdigo HTML. En este apartado, hars lo mismo definiendo una clase 13 (Pg. 66) que podrs utilizar en combinacin con otros identificadores. Sigue estos pasos:
y pulsa la tecla $ . A continuacin escribe la siguiente lnea: El cdigo fuente completo tiene el siguiente aspecto:
Haz click sobre y . Cierra el Bloc de notas pulsando sobre . Repite el paso 12 del apartado anterior. El resultado muestra un ttulo con las mismas propiedades que el texto que aparece, pero con un tamao de letra ms grande y en negrita Cierra el navegador con un click en .
Plantillas
Las ventajas de CSS

Por el contrario, si al principio del fichero has insertado una plantilla de estilo
1 2
Son elementos del lenguaje HTML que permiten definir y guardar caractersticas concretas para la presentacin de textos en la pantalla que podrs aplicar en cualquier parte del documento. Tambin se utilizan mucho en los procesadores de texto.
08
Puntos
Unidad de medida que permite establecer el tamao de un tipo de letra. Un punto equivale a 0,35 milmetros.
09
Cdigo fuente
Serie de instrucciones y comandos de programacin que se utilizan para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo usan los programadores para referirse al archivo que contiene las instrucciones de un programa.
10
El esfuerzo que exige dominar los procedimientos de hojas de estilo en cascada (CSS) merece la pena. Las plantillas de estilo son utilizadas por muchos webmasters 14 (Pg. 66) y van a seguir existiendo durante mucho tiempo. Sin embargo, las instrucciones bsicas de formato, como por ejemplo el identificador , tienen los das contados. La razn es que las hojas de estilo en cascada son mucho ms flexibles y ocupan menos espacio en el cdigo fuente. As, por ejemplo, si deseas asignar a una tabla un determinado tipo de letra, tienes que introducir en cada celda un identificador . Imagina que quieres resaltar un texto con letra Arial en negrita. El cdigo correspondiente sera el siguiente
10
Repite los pasos 2 y 3 del apartado Variaciones de estilo. Debes tener en pantalla el fichero HTML con el que has trabajado durante este captulo. Pulsa justamente delante de y presiona las teclas $ y . Con esto has creado una lnea en blanco:
siempre podrs recurrir a ella:
11
Y si ms adelante decides que el aspecto de tu documento resulta mejor con otro tipo de letra, te bastar con realizar un pequeo cambio al principio del cdigo. En otro caso tendras que revisar todas las lneas realizando los cambios oportunos una por una.
Utilizacin de los comentarios

los enlaces 15 (Pg. 66) a pginas que se encuentran en otro servidor 16 (Pg. 66) . Los comentarios tienen otra gran utilidad, pueden desactivar los fragmentos de cdigo que los navegadores antiguos no son capaces de comprender, por ejemplo las instrucciones relativas a hojas de estilo en cascada. Un navegador anticuado no es capaz de procesar correctamente el identificador y por tanto lo ignora. Es muy posible que a continuacin se encuentre con algo similar a esto: ja de estilo en cascada. Los comentarios tambin sirven para inutilizar temporalmente grandes bloques de cdigo HTML. Esto te puede resultar muy prctico cuando depuras fallos en tus pginas. Slo tienes que insertar al principio del bloque el identificador y al final. Como por ejemplo en
Escritorio
Superficie de trabajo de Windows 95 y 98. En ella puedes dejar todo tipo de ficheros y aplicaciones para que estn fcilmente accesibles en cualquier momento.
11
Truetype
Tipo de letra escalable que se puede imprimir o presentar en pantalla a cualquier tamao sin que se produzcan prdidas de calidad. Se utiliza tanto en ordenadores PC como Macintosh.
Si el cdigo de tus pginas HTML comienza a ser demasiado grande es muy conveniente que te acostumbres a utilizar comentarios, ya que te ayudarn mucho a comprender el funcionamiento de cada una de las partes del documento y cualquier otra persona podr realizar modificaciones en tus pginas sin perderse entre los comandos. El navegador ignora todo lo que aparece entre las marcas y , as que dentro podrs escribir todo lo que te d la gana. Por ejemplo: es un comentario tpico que puedes usar al principio de
Entonces se creer que se trata de un texto que debe representar en pantalla y el resultado de la pgina ser errneo. Pero si utilizas unas marcas de comentario al principio y al final de las instrucciones, el navegador antiguo ignorar todo el bloque de cdigo y el moderno ser capaz de identificarlo como las lneas que definen una ho-
Si practicas con este ejemplo concreto podrs observar como se desactiva el tipo de letra.
64
N 45
Profesional
12
Parmetro
5 6
Haz click justo detrs de y pulsa la tecla $ .
Abre la carpeta: .
Informacin que determina el funcionamiento de un programa. Tambin se conoce como argumento.

13
Introduce la siguiente lnea de cdigo:
que se encuentra en el Escritorio con un doble click de ratn. Dentro de ella, vuelve a hacer doble click en: El navegador te mostrar la siguiente pgina En la ltima lnea puedes comprobar el efecto de la plantilla . En la siguiente entrega del curso aprenders algunos aspectos de la programacin en Java 17 que podrs combinar con tus conocimientos de HTML para convertirte en un maestro del diseo de pginas web.
Clase
Con asocias el identificador a la clase . Observa que en este caso el nombre de la clase se debe escribir sin un punto que la preceda. Aqu tienes el cdigo fuente completo .
En relacin con las hojas de estilo en cascada, se entiende como un conjunto de instrucciones de formato que se pueden aplicar a cualquier identificador.
14
Webmaster
A los diseadores de pginas web tambin se les llama webmasters. Cuando completes este curso de programacin en HTML tendrs todos los conocimientos necesarios como para considerarte un webmaster profesional.
15
Va siendo hora de comprobar los resultados. Haz click en y para guardar todos los cambios que has realizado. Despus, cierra el Bloc de notas pulsando sobre el botn .
Enlace
Tambin se conoce como link. Es una referencia a otra pgina que se encuentra en la red Internet. Se suele distinguir por tener un color distinto al resto del texto, estar subrayado o representado por una imagen. Al hacer click sobre l, el navegador carga la pgina correspondiente.
16
Escribe las lneas siguientes:
Servidor
Las pginas web de Internet se encuentran almacenadas en el disco duro de unos ordenadores desde donde se pueden leer a travs de la Red. Estos ordenadores se llaman servidores y alquilan el espacio de su disco duro a los usuarios que desean publicar sus pginas. Algunos son gratuitos.
17
La mayor parte de instrucciones te deben resultar familiares. En la primera lnea resalta la indicacin . El punto que la precede avisa al navegador de que a continuacin viene una clase y es imprescindible para que la plantilla funcione correctamente.
Otro de los parmetros nuevos es . En este caso toma el valor para que subraye el texto. La plantilla que acabas de crear se puede utilizar para representar todos los elementos de texto importantes destacndolos del resto con una fuente Arial de 14 puntos en color rojo, escritos en negrita y subrayados. Para comprobar el resultado debes escribir algn texto utilizando esta clase.

ciales, por ejemplo . El formato se escribe inmediatamente despus y debe ir entre los smbolos y . la pantalla cuando se visualiza la pgina. dentro de otras. Por ejemplo, puedes asignar propiedades globales a los identificadores y despus fijar con una segunda instruccin propiedades especficas a cada uno.
Java
Lenguaje de programacin que se emplea en muchas pginas de Internet. Utilizando unos pequeos mdulos escritos en Java, llamados applets, las pginas web pueden incluir funciones de animacin, vdeo, calculo, etctera. Este lenguaje fue creado por Sun Microsystems.
Las plantillas de estilo se definen al principio del documento HTML y se pueden utilizar en cualquier momento que se desee presentar texto en pantalla. Para indicar al navegador que vas a crear una plantilla de estilo debes utilizar el siguiente comando: .
Insertar comentarios
No te olvides de escribir las marcas de comentario y cada vez que definas una hoja de estilo en cascada. Gracias a ellas, conseguirs que los navegadores antiguos pasen por alto las lneas de cdigo que no comprenden. Si no utilizas los comentarios pueden aparecer smbolos errneos en
N 45
Los formatos ms importantes

El tipo de letra se fija con . Para el tamao se utiliza , mientras que el color se determina con . No olvides poner detrs de cada indicacin los dos puntos.
Utilizacin de clases
Las hojas de estilo se pueden definir sin utilizar identificadores. Para hacerlo se emplean las clases que deben ser definidas precedidas de un punto: . Para utilizarlas dentro del cdigo debes escribir: .
Plantillas con Identificadores

Lo primero que debes hacer para definir un identificador que funcione como una plantilla es escribir su nombre sin utilizar los parntesis espe-
Formatos complementarios
Las hojas de estilo en cascada se pueden construir unas
66
Profesional
Programacin en HTML 11 parte

JavaScript para formularios Javascript o VB script
Consejos de programacin
66
67 70
Control de presencia
70
Al igual que los pequeos Curris se encargan de realizar las tareas duras en Fraggle Rock, sencillos programas insertados en tu pgina web te quitarn mucho trabajo. Quieres saber cmo? Pues bienvenido a Javascript.
35 37 38 39 40 41 42 43 44 45 46 47 48
eguro que ya has odo hablar de Java 01 , el lenguaje de programacin de moda. Parece que si eres programador y no sabes Java te has quedado anclado en el pasado. Pues bien, esta entrega del curso de HTML 02 estar dedicada a ver cmo insertar sencillos programas en javascript 03 dentro de tu pgina web. Estas aplicaciones te permitirn controlar o iniciar determinadas acciones, como por ejemplo la gestin de los datos introducidos dentro de un formulario incluido en tu pgina web. Un interesante ejercicio para iniciarte en Javascript, un len-
guaje que dar mayor f lexibilidad a tus pginas web.
te manden un formulario con alguno o todos sus campos en blanco.
Javascript para formularios

con un programa de ejemplo, y la ayuda del Javascript, vas a comprobar los datos de un formulario. Para ello te bastar con un formulario bastante sencillo. Puedes encontrar ms informacin sobre stos en la octava entrega del curso sobre HTML del nmero 43 de Computer Hoy. El siguiente programa verifica que el remitente ha introducido realmente todos los datos solicitados antes de enviarlo, y as evitar que
Empezars cargando el fichero de la plantilla. Para ello, haz doble click sobre:
Antes de comenzar a trabajar, y al igual que en las entregas precedentes, debes guardar el fichero de la pgina que vas a crear con un nombre distinto al de la plantilla (evitando as sobrescribirla). Para ello, haz click sobre y selecciona .
Lo mejor ser que lo nombres como y pulses .
4 5
En el codigo fuente 04 haz click justo en la segunda fila, tras
Dentro del editor haz click sobre y despus en . En , pulsa y selecciona la opcin . A continuacin haz click en y pincha en . En el Bloc de notas, la plantilla tendr el siguiente aspecto .
N 46
y pulsa C . Introduce la siguiente lnea de cdigo:
sta le indica al navegador que las siguientes lneas hasta pertenecen al programa en Javascript. En castellano, se traduce por lenguaje e indica al navegador que las siguientes
66

lneas de cdigo estn programadas en . El programa sigue el mismo principio. En este caso primero slo aparece el si (condicional) y la condicin. Las instrucciones vienen a continuacin. La condicin comprueba si uno o dos de los campos estn vacos. A primera vista, el acceso a estos campos puede parecer algo complicado, porque Javascript numera, comenzando la cuenta por cero, los formularios. El primero de una pgina se llama . En este caso, se trata del formulario ejemplo que vas a programar. Dentro de ste est previsto que introduzcas dos campos. El primero para el apellido lleva la indicacin . Para Javascript se trata, por tanto, del primer elemento dentro del primer formulario. Con se pasa al segundo campo. En el ejemplo que se va a tratar a continuacin reservars este campo para el nombre. Para comprobar que aparece texto dentro de un campo debes comparar su contenido, en ingls , con el contenido que viene a continuacin . Las dos comillas se refieren a que no hay texto. La primera parte de la condicin de este programa presenta el siguiente aspecto . O traducido: si el valor del primer elemento del primer formulario est vaco. Con esto se cierra la primera condicin parcial. En la primera lnea aparecen, adems, dos barras verticales que se obtienen presionando simultneamente las teclas A y 1 . En este caso se trata de una unin, es decir,; un nexo entre las dos condiciones. Estas dos barras representan un o. El programa lo interpreta de la siguiente manera: si se cumple la primera o la segunda condicin, el programa debe ejecutar las lneas de cdigo que encontrar a continuacin. As, si ocurre que el primer campo, el segundo o los dos se encuentran no contienen datos, entenders la segunda lnea de cdigo: Esto significa:si est vaco el segundo campo del primer formulario. Si uno de los dos campos se encuentra vaco,el programa ejecuta las instrucciones siguientes . A continuacin volvern a aparecer los parntesis especiales para que el programa sepa dnde est el principio y el fin. y la ayuda del signo se aade a las variables de texto un texto adicional: . La instruccin acorta algo el texto, mientras que se encarga del cambio de prrafo.
01
Profesional
Java
Tras pulsar C tendrs que continuar con los siguientes smbolos: . Estos enmarcan el cdigo como comentario 05 . As podrs evitar que los navegadores que no son capaces de interpretar Javascript muestren dicho cdigo en la pantalla. A continuacin introduce las siguientes dos lneas de cdigo:
10
Tras pulsar C , teclea y presiona de nuevo la tecla C . Escribe la siguiente lnea de cdigo:
13
11
Introduce las dos lneas de cdigo siguientes: . Con esta instruccin el programa comprueba el segundo campo y saca la conclusin correspondiente. Si los dos campos estn vacos el mensaje que aparece es el siguiente:
Con estas lneas comienza el programa propiamente dicho. En este caso, el cdigo es una funcin 06 (Pg.68) . sta se puede activar desde cualquier punto de la pgina haciendo una llamada a su nombre . La llave (para obtenerla presiona las teclas A y a la vez), sirve para unir los apartados correspondientes,como las funciones o las sentencias IF 07 (Pg. 68) . Al final del apartado debe aparecer el cierre de parntesis ( presiona las teclas A y simultneamente).
En este caso, la variable se complementa con algo de texto. Los dos se encargan de insertar antes y despus de un salto de lnea 11 (Pg. 70) .En Javascript la instruccin funciona igual que la etiqueta en HTML. Debes utilizar otra instruccin para que el programa sepa cual de los campos de tu formulario est vaco.
Lenguaje de programacin que permite ejecutar ciertas funciones en cualquier sistema que tenga un intrprete de dicho lenguaje. Los navegadores de Internet modernos disponen de este intrprete, con lo que pueden ejecutar programas en este lenguaje que se encuentren en pginas de Internet. Existen aplicaciones en Java de todo tipo, desde juegos hasta programas para charlar.
02
HTML
Tal vez te ests preguntando dnde se encuentran, en estas dos lneas de cdigo, los parntesis especiales. Estos no son necesarios, ya que tras slo hay una lnea ms. El programa ya sabe qu es lo que falta y puede dejar un mensaje.
12
Vuelve a presionar la tecla C y escribe la siguiente lnea de cdigo: . La indicacin seala al programa que debe preparar una variable 08 (Pg. 64) de nombre . En programacin, a esto se le llama declarar una variable. Ms adelante, y si queda alguno de los campos vacos, con conseguirs que en tu formulario aparezca un mensaje de error. Las siguientes dos lneas de cdigo son las que se encargarn de comprobar los campos del formulario. Introduce las siguientes lneas de cdigo
Seguidamente, introduce la siguiente lnea de cdigo: . La primera fila ya te debe resultar familiar. El programa comprueba de nuevo si el primer campo del formulario est vaco. Si es ste el caso, entra en accin la segunda lnea de cdigo. En este caso es algo ms complejo. Con
Lenguaje de programacin de pginas web. Se escribe utilizando identificadores. Estos son rdenes que das al navegador para que muestre una pgina web tal y como deseas. Cada identificador es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos o cualquier otra propiedad de la pgina que quieras aplicar.
03
14
teclea: . significa en castellano alarma o alerta. El navegador mostrar un mensaje que indicar lo que falta por introducir.Ahora le debes indicar al programa que, en el caso de no estar relleno alguno de los campos,detenga la ejecucin del formulario.
Para
ello
Javascript
Versin reducida del lenguaje Java, desarrollada exclusivamente para su uso en la creacin y diseo de pginas web. Permite dotar a stas de funciones imposibles de aplicar haciendo uso exclusivo del lenguaje HTML.
04
Cdigo fuente
Javascript o VB script
ce), no debern tener ningn problema con VB Script. Puedes aprender ms sobre el VBA en los nmeros 9, 11, 13, 15, 17 y 19 de Computer Hoy, dentro de esta misma seccin. Para los principiantes, el VBA no es ms complicado que el Javascript. Pero las aplicaciones escritas en VB Script slo funcionan con el navegador Internet Explorer de Microsoft. Si deseas que los usuarios de Netscape Navigator puedan ver tus pginas sin problemas, te recomendamos que escribas el cdigo en Javascript.
En castellano es SI (condicional). A ste le siguen unas condiciones 09 (Pg. 68) e instrucciones 10 (Pg. 68) . En la vida real no es muy distinto. Por ejemplo, si llueve (condicin), entonces me voy a la calle con un paraguas (instruccin).
Adems de Javascript, existe otro lenguaje pensado para desarrollar sencillos programas para pginas web. Este lenguaje se llama VB Script y ha sido desarrollado por Microsoft. VB Script es un lenguaje de programacin estrechamente relacionado con Visual Basic, otro lenguaje tambin desarrollado por la empresa Microsoft. Todos los programadores que estn familiarizados con Visual Basic o con VBA (Visual Basic for Aplications, pequea versin de VB incorporada en Microsoft OffiN 46
Serie de instrucciones de programacin desarrollada por un programador. Un ejemplo de cdigo fuente es la codificacin de una pgina web
05
Comentario
Lneas de texto que se introducen dentro de un programa para facilitar su lectura por parte de aquellas personas que no hayan participado en su desarrollo. Por norma general, los programadores acompaan de comentarios las funciones ms complejas incluidas en sus programas, facilitando as su lectura y comprensin.
67
Profesional
06
Funcin
15
Elemento que el programa puede utilizar reiteradas veces, descargando as al programador de tener que reescribirlo cada vez que ste es necesario dentro del programa. Dentro de una funcin se encuentra un grupo de instrucciones bajo un mismo nombre. En algunos casos, las funciones devuelven un valor, como por ejemplo al realizar un calculo.
07
Vuelve a pulsar C e introduce el siguiente cdigo: . , que en castellano se puede traducir por volver, y por falso. Es decir, el programa recibe la indicacin Vuelve al remitente e indcale que hay algo incorrecto. Esta notificacin interrumpe la ejecucin del formulario.
16
Finalmente, vuelve a pulsar C y a continuacin teclea y C . Con estos smbolos marcars la parte del programa que se ejecuta cuando uno de los campos est vaco. A continuacin falta poner otro para cerrar toda la funcin. Ahora slo te queda insertar el smbolo de
cierre del comentario . El smbolo evita que Javascript interprete el final del comentario como
cdigo propio y te alerte con un mensaje de error. Con la linea cerrars el programa.
17
18
Sentencia IF
If se puede traducir por "cuando". Las sentencias "if" sirven para diferenciar entre varias posibilidades. Si se da el primer caso entonces se ejecuta la instruccin correspondiente. Las sentencias if son muy comunes en programacin, por ejemplo para diferenciar si se ha hecho click sobre un botn o se ha alcanzado un determinado valor.
08
Variable
En los programas, las variables son reservas de espacio" a las que se les asigna un valor. ste puede ser el resultado de un clculo matemtico o un texto. En Javascript las variables pueden tener cualquier nombre. ste incluso puede contener cifras, pero con la salvedad de que debe comenzar con una letra, como por ejemplo "a1234".
09
ste es el momento de continuar con el formulario propiamente dicho. Selecciona la lnea de cdigo e introduce las siguientes lneas . Con este cdigo programars un sencillo formulario con dos campos y un botn para mandarlo. Se ha puesto un ejemplo sencillo para que veas las posibilidades que ofrece la programacin en Javascript. Slo te debe resultar extraa la siguiente lnea de cdigo . Se trata de la llamada a una funcin en Javascript que vas a programar ms adelante. inicia la funcin en el momento que presiones el botn , y a continuacin espera una contestacin. Si sta es , el formulario no se sigue ejecutando. El visitante de tu pgina tiene ahora la posibilidad de seguir rellenando el formulario o ampliar los datos. La pgina est lista. El cdigo fuente al completo tiene el siguiente aspecto: . Haz
19
!
Condicin
Constituye el factor de toma de decisin dentro de una sentencia if, siendo, por lo tanto, la necesaria primera parte de sta.
10
click sobre y en . Cierra el Bloc de notas haciendo click sobre .
Resumen del captulo

dentro de un comentario HTML y . No olvides identificar dentro de Javascript el final del programa como un comentario. Para ello utiliza los caracteres . bloque de la funcin o las ins- indicas al programa que se trucciones tiene que ir en- tiene que cumplir al menos tre estas llaves y . una de las dos que se han indicado en la sentencia If paSi ... entonces ra que se ejecute la instrucLa instruccin se utiliza cin correspondiente. para comparar distintas condiciones. Si cumple una de Alarma muesellas, el programa ejecuta La instruccin una instruccin determinada. tra un mensaje en pantalla. Estas construcciones condi- Este mensaje consistir en un cionales se pueden enlazar. texto que debers haber inSi entre dos condiciones po- troducido previamente en el nes dos rayas verticales , cdigo en javascript.
Instruccin
Orden que se da a un programa de ordenador o al sistema operativo. En el caso de una sentencia if, se trata de la segunda parte de sta, es decir, la accin que se realizar en caso de darse la condicin indicada en la primera parte de la misma.
Javascript es un lenguaje para desarrollar funciones sencillas y programas de aplicacin para tus pginas web. Un script en java se encuentra entre estas etiquetas y .
Comentarios
Funciones
Para iniciar un programa en Las funciones sirven para geJavascript tienes que indicr- nerar instrucciones del proselo primero al navegador grama y despus llamarlas desde cualquier punto Inserta las lneas de cdigo de la pgina en HTML. Cada
N 46
68
Profesional
La prueba del navegador Comprobar la ortografa Bsqueda de errores Descargar e instalar Netscape
62
63 64
66
Hoy en da cada vez ms gente tiene su propia pgina web. Sin embargo, algunas personas descuidan el correcto funcionamiento de sta. Si quieres que tu web pase victoriosa por cualquier test, aqu te enseamos cmo solucionar los problemas ms habituales.
i ya has ledo las once primeras entregas del Curso de HTML 01 , ests preparado para editar tu primera pgina. Pero cuidado: en cada pgina se suelen "colar" algunos errores.Tu atractiva pgina web no aparece correctamente al abrirla con el navegador 03 , o en el peor de los casos ni siquiera sale algo.Y an peor es esto otro: los programas de acceso Internet Explorer y Netscape Navigator funcionan igual en su mayor parte. Eso es lo malo: slo en su mayor parte! En algunos casos, Netscape Navigator se muestra cla-
ramente ms estricto con el cumplimiento de las reglas, lo que afecta al funcionamiento y presenta de forma defectuosa pginas que funcionan perfectamente con Internet Explorer. En esta parte del curso aprenders a depurar 04 errores tpicos, y a probar tus pginas antes de publicar tu trabajo en Internet. Una regla bsica es que debes probar necesariamente tus documentos HTML con los dos navegadores ms utilizados. Uno de ellos, Internet Explorer, ya est instalado en la mayora de los ordenadores con Windows.
Si no tienes Netscape Navigator, te lo puedes bajar desde Internet. Podrs ver como hacerlo en el cuadro Descargar e instalar Netscape en la pgina 66.
N N N Insertar imgenes N Distintos formatos de escritura N Divisin de pginas con tablas N Para Insertar y dimensionar marcos N expertos Ejemplo de formulario N Qu son y para qu sirven los identificadores N Conceptos bsicos del estilo en cascada N Para N profesionales HTML con Java Probando las pginas HTML N Principios legales de las pginas de Internet N
Para principiantes Listas, barras y vnculos
Fundamentos: crear el primer archivo HTML Cmo disear y dar formato a los textos
35 37 38 39 40 41 42 43 44 45 46 47 48
La prueba del navegador

A lo largo de este curso, seguro que ya has probado tus pginas con Internet Explorer, pero ahora viene la prueba de fuego. Funciona tambin todo con Netscape Navigator? Para confirmarlo, utiliza el archivo de los capN 47
tulos anteriores. Si ya no tienes este archivo y sus imgenes correspondientes:
consulta esta misma seccin en el nmero 39 para ver cmo crearlo y de donde obtenerlas.
en la carpeta:
Para probar tus pginas con Netscape Navigator, lo primero que tienes que hacer es click en , pulsa , selecciona y pincha en .
62
Ilustracin: Alexander Heb. Montaje: Computer Hoy.
Profesional
Una vez abierto Netscape Navigator, haz click en y . En la ventana que se abrir , haz click en . Con ello se mostrar el cuadro de dilogo Abrir
sin, ten especial cuidado con los siguientes puntos: Tienen todas las tablas el aspecto que deben tener? Todos los datos estn correctos? Se encuentran bien ajustados los marcos 05 ? Las imgenes estn insertadas en el lugar adecuado?
girs las faltas que localices en el texto fuente 06 (Pg.64) Hazlo de esta forma:
01
HTML
Abre haciendo doble click en la carpeta:
Busca el archivo que desees probar, por ejemplo . Haz doble click en l para abrirlo. Selecciona con el ratn el apartado que desees revisar, por ejemplo
!
Lenguaje de programacin de pginas web. Se escribe haciendo uso de identificadores 02 . Creado en 1989 en el CERN (laboratorio europeo de fsica de partculas), su objetivo era ser un mtodo nico de bsqueda de informacin y acceso universal a la misma, eliminando la necesidad de usar distintas aplicaciones con este fin.
02
Identificador
Recomendaciones
que an encuentres errores que no viste el primer da. Pdele a algn conocido que revise los errores de tus pginas, algo que puede ser de gran utilidad sobre todo en la ortografa. Escribe un vnculo con tu direccin de e-mail en tu pgina, por ejemplo: As le das al visitante de tu web la oportunidad de que te informe sobre los posibles errores que pueda encontrar.
Haz click en lista:
y elige de la
Si aparece algn error, escribe el nombre del archivo en una hoja e investiga despus la causa. Encontrars ms informacin, en el apartado Bsqueda de errores en la pgina 64.
Puede que no veas las pginas HTML. En la mayora de estos casos se esconde un error. Ten en cuenta las siguientes reglas que te mostramos: Imprime cada documento antes de editarlo en Internet Si has publicado una pgina en la red, comprueba enseguida los errores. Mira la pgina de nuevo dos das despus. Es muy probable
El lenguaje HTML se escribe utilizando identificadores o etiquetas (tags).stas son rdenes que das al navegador para que muestre una pgina web tal y como deseas. Cada tag es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos, etctera.
03
la carpeta . Haz click en ella para abrirla. Si no encuentras enseguida este campo, haz click en hasta que aparezca.
Cuando hayas terminado de probar todas las pginas, cierra Netscape Navigator haciendo click en y pulsando .
Navegador
Comprobar la ortografa
Al escribir archivos en HTML se cuelan habitualmente faltas de ortografa.
Haz doble click en y despus pulsa
Consejos prcticos
mientras que a Windows no le importa si escribes pagina.html o Pagina.html. Si el archivo se llama algo as como pagina.html, pero se encuentra en un hipervnculo Pagina.html, todo funcionar bien en tu ordenador, pero en el servidor puede provocar algn error, por ejemplo cuando funciona bajo Linux.
En la pantalla aparecer la pgina
En el laberinto de identificadores y texto, stas se ha-
Aqu todo tiene un aspecto excelente.
Repite los pasos 2 a 5 con todos los archivos HTML que has escrito durante este curso. En la revi-
cen difciles de descubrir. El siguiente truco es eficaz para encontrar errores: utiliza simplemente un procesador de texto, por ejemplo Microsoft Word, como ayuda ortogrfica. Despus corre-
Antes de situar tus pginas HTML en Internet, tienes que comprobar todos los hipervnculos internos (es decir, los que componen tu web). Para ello, haz click en uno tras otro y observa si aparece la pgina correspondiente.Es suficiente iniciar el navegador y cargar la pgina de inicio. En este caso no necesitars una conexin a Internet. Si estas pruebas no dan errores, puedes insertar la pgina en la Red. Cmo hacerlo es algo que est regulado por cada servidor. Infrmate del sistema de funcionamiento de ellos. Vuelve a probar despus todas las referencias cruzadas internas y accede, esta vez como visitante, a tus pginas en Internet. Si de repente algo no funciona, puede ser debido a un nombre de archivo incorrectamente escrito. Algunos servidores distinguen entre escritura con mayscula y con minscula,
N 47
Programa que permite visualizar el contenido de las pginas web de Internet. Tambin se puede utilizar para descargar ficheros de la Red o visualizar algunos contenidos multimedia como sonidos, imgenes o incluso vdeos.
04
Depuracin
Fase posterior al testeo. Consiste en buscar y aplicar soluciones a los fallos y problemas que puedan surgir en un programa o pgina web.
05
Marcos
Comprueba los vnculos externos

Confirma tambin las referencias cruzadas que te llevan desde tu pgina hacia otras pginas ajenas. En cuanto sites tu web en Internet, haz click en todos los vnculos externos y observa si funcionan. Repite esta comprobacin habitualmente, ya que a menudo se modifican las direcciones y pueden ser distintas o incluso haber desaparecido de la Red.
Se utilizan en el diseo de pginas web para organizar la informacin y facilitar el acceso a ella. Cuando se divide una web en secciones que pueden mostrar pginas web independientes, a cada una de estas secciones se la denomina marco o frame. Al contenedor que incluye el grupo de marcos se le llama pgina de marcos. Tambin se suele utilizar para crear tablas de contenido, que permanecen en pantalla mientras te desplazas por la web.
63
Profesional Programacin en HTML, 12 Parte
06
Texto fuente
Tambin llamado cdigo fuente. Serie de instrucciones y comandos de programacin que se utilizan para indicar al navegador lo que debe hacer cuando muestra un archivo que tiene formato HTML. Este trmino tambin lo usan los programadores para referirse al archivo que contiene las instrucciones de un programa.
07
4 5 6
Haz click en pulsa .
Deja Internet Explorer abierto e inicia tu procesador de textos, por ejemplo Word 2000, para ello pulsa , pincha y selecciona . En Word, haz click en el men y selecciona . El texto se puede ver en pantalla: Introduce una lnea diagonal antes de la segunda , de modo que quede as . Hecho esto, el texto aparecer correctamente:
Cursiva
Cuando escribes, lo haces con una letra que, si bien vara de tipo, presentar un aspecto normal. Adems, ese mismo tipo de letra puede presentarse en Negrita en Cursiva o Subrayado. Estos efectos se usan para resaltar frases o palabras o para darles un significado especial.
08
7 8
Inicia la revisin ortogrfica pulsando 7 , o pinchando en y seleccionando . Si te encuentras con una falta, apunta la posicin del texto correspondiente en un papel y despus corrgela en el texto fuente. Cuando ya hayas revisado la ortografa de tu pgina, y tras anotar los errores, haz doble click en:
Pero en Netscape Navigator no se ve nada: El motivo es que aqu
ya ha aparecido el culpable: se trata de un hipervnculo introducido incorrectamente. En este punto falta un .
Link
Tambin se conoce como enlace o vnculo. Es una referencia a otra pgina que se encuentra en la red Internet. Se suele distinguir por tener un color distinto al resto del texto, estar subrayado o representado por una imagen. Al hacer click sobre l, el navegador carga la pgina correspondiente.
09
y abrirs el editor. Carga el cdigo fuente correspondiente y corrige los errores manteniendo abierto Word por si necesitaras asegurarte de alguno.
10
CSS
Son plantillas que se pueden utilizar para crear documentos HTML y dar formato a los textos que se presenten en pantalla. Por ejemplo, determinar el tipo, tamao y color de la letra. Las hojas de estilo en cascada resultan muy prcticas, ya que permiten ahorrar lneas de cdigo y gestionar mejor la presentacin de texto.
10
Cuando la correccin haya acabado y las faltas estn corregidas, cierra Word, Internet Explorer y el Editor haciendo click en en cada una de las ventanas.
falta el identificador de cierre de la tabla. Lo que tendrs que hacer en este caso es introducir el texto fuente correspondiente. Sitate en esa posicin e inserta . Si ves que parte del texto tiene este aspecto:
A menudo aparece este error De repente, todo est en letra cursiva 07 , aunque slo la palabra: debera aparecer en este formato. Solucin: al introducir el tag has olvidado una lnea diagonal antes del identificador de cierre. Echando un vistazo al cdigo fuente la podrs ver:
Bsqueda de errores
Casi ms difcil que encontrar faltas de ortografa es descubrir etiquetas errneas.Y a menudo las consecuencias de las faltas no se descubren enseguida. A continuacin vers algunos problemas habituales de la programacin en HTML y su solucin: Has programado una tabla que tiene el siguiente aspecto en el navegador Internet Explorer:
!
Dos caminos de prueba

terios distintos en lo que se refiere a la presentacin del texto fuente. As, Netscape Navigator evita hacer el trabajo si hay errores por descuido, mientras que Explorer puede presentar las pginas a pesar de todo. do con los identificadores que no sean de cierre, es decir, aquellos que no llevan lnea diagonal .
Examen general
Antes de insertar pginas HTML en Internet, tienes que comprobarlas sin falta con los navegadores ms utilizados. En cada caso, prueba las pginas con los navegadores Internet Explorer y Netscape Navigator.
Javascript
Versin reducida del lenguaje Java, desarrollada exclusivamente para su uso en la creacin y diseo de pginas web. Permite dotar a stas de funciones imposibles de aplicar haciendo uso de HTML.
Comprobar los hipervnculos

Cada link 08 debe funcionar correctamente. Para ello comprueba regularmente las referencias cruzadas dentro de tus propias pginas y los hipervnculos con otras webs de Internet.
Dos navegadores, dos pruebas

Internet Explorer y Netscape Navigator tienen en parte criN 47
Encontrar fuentes de error

Si te encuentras con un fallo, comprueba el texto fuente del archivo. Ten cuidado sobre to-
64
Profesional Programacin en HTML, 12 Parte

El siguiente fallo suele confundir a los programadores que hacen uso de las CSS 09 (Pg.64) en sus creaciones. Una pgina aparece correctamente en Explorer: estilo, se ha colocado un signo igual: Tambin los programadores de javascript 10 (Pg.64) se ponen a s mismos trampas (accidentalmente, por supuesto) de vez en cuando. En este caso Explorer tampoco se inmuta por el problema. El sencillo programa de control de presencia de tu web en frames (consulta esta misma seccin en el n 46) funciona sin problemas nal de modo que el texto fuente tenga este aspecto: siguiendo unos sencillos y rpidos pasos. Ten en cuenta que, aunque aqu se han planteado casos concretos, siguiendo los consejos dados, as como aplicando las soluciones de stos a otros problemas, tendrs casi ganada la guerra contra los duendes que intenten colarse en tu web. La siguiente y ltima parte del Curso de HTML tratar sobre cuestiones jurdicas en y sobre Internet. Y es que la Red no es, en contra de la opinin mayoritaria, un espacio sin leyes, donde cualquiera puede violar las legislaciones de los pases con la ms absoluta impunidad. Pese a que todava quedan bastantes asuntos pendientes de ser legislados, la justicia est avanzando a pasos agigantados para evitar que Internet se convierta en la autopista del delito.
Explorer acepta este carcter, sin embargo Navigator es bastante ms estricto y no muestra las plantillas de formato con este tipo de error. si bien en Netscape Navigator sale sin los formatos previstos: La causa de ello est en un descuido. En lugar de los dos puntos : antes de la asignacin de una plantilla de
!
Con estos errores tpicos y sus soluciones, Computer Hoy te sumerge en el mundo de la programacin en HTML. Ahora ya eres casi un profesional de HTML y puedes no slo programar, sino tambin encontrar errores con precisin y eliminarlos
Hay ms navegadores
Neoplanet - destaca por su diseo, ya que haciendo uso de las skins tan de moda, permite que el navegador adopte el aspecto que desees. Por su parte, Broadcast -V te ofrece la posibilidad de dividir la ventana, mostrndote mltiples pginas simultneamente. Y stos son slo una mnima muestra de todos los navegadores que puedes encontrar. Dando una vuelta por la Red descubrirs muchos ms.
Internet Explorer y Netscape Navigator son, con diferencia, los navegadores ms utilizados en Internet. Pero esto no significa que sean los nicos. Cada vez aparecen ms navegadores que pretenden destacar por ser ms rpidos, por alguna funcionalidad especial e, incluso, por ofrecer un un bonito diseo. As puedes encontrar por ejemplo el navegador Opera - v , que ocupa muy poco espacio en tu disco duro y ofrece una navegacin bastante rpida.
y elimina en este caso los marcos: Sin embargo en Netscape Navigator se mantienen: El error est en un lugar insospechado. En los caracteres que indican que se trata de un comentario en HTML, la indicacin al navegador de que ste se cierra no est completa
Netscape Navigator se tropieza con el problema y ejecuta el programa, mientras que a Internet Explorer le da igual. Elimina el error insertando una doble lnea diago-
Direcciones online
v www.opera.com www.neoplanet.com -V www.broadcast.com - www.netscape.com/es
Descargar e instalar Netscape Navigator
Aunque cada da es ms normal encontrar CD-ROMs de conexin a Internet en los cuales se suele encontrar una copia de este navegador, tambin puedes conseguirlo a travs de la Red de redes. Si esto es lo que quieres, sigue estos pasos:
4 5 6
La siguiente web te presenta las opciones que has elegido para la descarga. Si son correctas, pulsa . Desplzate hacia abajo en la siguiente web y busca:
8 9
En , selecciona donde deseas guardarlo y pulsa . Con ello comenzar el proceso de descarga de Netscape Comunicator a tu PC como se te indica en la ventana En ella asegrate de tener sin seleccionar la siguiente opcin:
est preparando. En breve ests desaparecern y, tras mostrarse una ventana de fondo azul, aparecer una ventana dndote la bienvenida al proceso de instalacin. Para proceder, haz click en .
les o interesantes y, seguidamente, haz click en .
15 16 17 18
1 2
Inicia una conexin a Internet del modo habitual y escribe - . Con ello se abrir la pgina principal de Netscape en espaol. En ella pulsa:
Una vez encontrado debers hacer click en l. En la siguiente y ltima! pgina tendrs que buscar y hacer click en ste enlace
12 13 14
Lo siguiente es indicarle al programa dnde deseas que se muestre en el men inicio. Conserva la opcin predeterminada y pulsa el botn . En , pincha en para realizar la instalacin. Cuando sta haya finalizado, se te preguntar si quieres leer el archivo de texto README. Si no lo lees ahora puedes hacerlo mas adelante, as que pulsa .
10 11
3
66
En la pgina que se abrir busca el siguiente link: y pincha en l con el ratn.
En unos segundos se abrir automticamente la ventana . En ella marca la opcin y pulsa .
Finalizada la descarga, la ventana cambiar, , indicndotelo. Cuando esto ocurra, haz click en , para iniciar la instalacin.
A continuacin se te informar sobre los trminos de la licencia de uso. Revsalos y, si ests de acuerdo, pulsa . En la siguiente ventana, deja las opciones que se te ofrecen por defecto y pulsa . Ahora, Netscape te pregunta por varias opciones de configuracin. Selecciona las que te resulten ti-
Durante unos segundos, aparecern en pantalla unos mensajes informndote de que la instalacin se
N 47
Y ya est, haz click en y reinicia tu ordenador.
Profesional
11
Salto de lnea
20
Tambin conocido como retorno de carro, consiste en finalizar una lnea de texto y saltar automticamente a la siguiente.
12
Para visualizar el resultado haz doble click sobre el icono
pos correctamente, no se mostrar el mensaje de error. En la ventana no hay cambios apreciables a excepcin de la direccin. Con la entrada de unos datos, por ejemplo y en la lnea de direccin, tras hacer click sobre aparece . Como podrs comprobar, en principio este ejemplo no realiza ninguna operacin con los datos. Si quieres aprender como gestionarlos, puedes ver otro ejemplo en esta misma seccin, en el nmero 43 de Computer Hoy.
Testear
Proceso que comprueba el correcto funcionamiento de un programa o de una web. Constituye un elemento fundamental dentro del desarrollo de una web y ha de ser completo, ya que evita fallos y problemas que suelen ocasionar una psima imagen.
13
que encontrars en tu Escritorio. Seguidamente haz doble click sobre .
vs de la programacin en HTML y Javascript. En la siguiente podrs ver cmo testear 12 los documentos en HTML y cmo encontrar y depurar 13 los errores ms comunes, ya que no hay nada ms desagradable que una pgina plagada de erro-
res y que adems no funcione correctamente. La impresin que da es muy negativa. En la ltima entrega conocers los aspectos legales de las pginas web, evitando as el riesgo de cometer sin querer algn tipo de delito.
21
En Internet Explorer aparecer .
Consejos de programacin
ya tiene que estar cargado. En caso contrario no funciona.
Siempre al principio
Si programas en Javascript, conviene que te acostumbres a incluir el cdigo al principio del documento en HTML. Esto te asegura que el programa se ejecute sin problemas. La razn la encontrars en el propio funcionamiento del navegador. Los navegadores leen el cdigo fuente de una pgina HTML lnea a lnea. En cuanto encuentra datos los representa en pantalla como imgenes, textos o tags. Si entre estos datos hay una accin que llama a un programa en Javascript, ste
Depurar
Fase posterior al testeo. Consiste en buscar e implementar soluciones a los fallos y problemas que puedan surgir en un programa o pgina web.
14
22
Si haces click sobre enviar dejando uno de los campos sin rellenar, aparecer el siguiente mensaje . Con un click sobre cerrars la ventana con el mensaje de error.Pero,si rellenas los dos cam-
Javascript es transparente
Si programas en Javascript tienes que ser consciente de que cualquier persona que accede a tu pgina puede ver el cdigo del programa. Muchos usuarios simplemente visitan otras pginas para sacar ideas para sus propios programas en Javascript. Pero no olvides que la propiedad intelectual est protegida. Esto tambin es vlido para las aplicaciones en Javascript.
Ya puedes cerrar Internet Explorer con un click sobre . Y con esta entrega finaliza este apasionante viaje a tra-
Frame
Se utiliza en el diseo de pginas web para organizar la informacin y facilitar el acceso a ella. Cuando se divide una web en secciones que pueden mostrar pginas web independientes, a cada una de estas secciones se la denomina marco o frame. Al contenedor que incluye el grupo de marcos se le llama pgina de marcos. Tambin se suele utilizar para crear tablas de contenido, que permanecen en pantalla mientras te desplazas a diferentes pginas del sitio web.
15
Controlar la presencia de tu web dentro de unos marcos ajenos

miliares las dos primeras lneas de cdigo. En la tercera lnea vuelves a encontrar un comando . Con la instruccin: el programa comprueba si en la ventana del navegador aparecen frames. La aplicacin utiliza para ello un contador que est en todos los navegadores. Este contador registra el nmero de frames que se encuentran abiertos en ese preciso instante. se puede traducir al castellano por longitud. Es decir, determina la cantidad de que se encuentran en la parte superior( ). Los dos caracteres indican desigualdad. Toda la lnea se puede traducir por: si el nmero que da la suma de todos los frames que se encuentran
N 46
URL
Siglas correspondientes a Uniform Resource Locator, lo que traducido sera localizador homogneo de recursos. Una URL es una direccin de pgina web de Internet.
16
Tag
El lenguaje HTML se escribe utilizando tags o etiquetas. Estas son rdenes que das al navegador para que muestre una pgina web tal y como deseas. Cada tag es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos, etctera.
Algunos usuarios pueden insertar un enlace a tu pgina, pero a veces slo permiten que sta aparezca dentro de un frame 14 haciendo que permanezcan los dems elementos de su pgina. As, los visitantes creen que tu web es un elemento ms de una pgina extraa. Un visitante de tu web, por ejemplo, no puede ver tu URL 15 , lo que le impide recordar tu direccin. Esto tiene solucin. Un sencillo programa en Javascript que debes insertar en el documento, concretamente entre y las tags 16 . Escribe las siguientes lneas de cdigo: . Si has ledo esta entrega del curso ya te deben resultar fa-
en la parte superior no es igual a 0 entonces ejecuta la siguiente accin. Ms claro: si encuentras un frame, que por cierto aqu no pinta nada (ya que t no has instalado ninguno), pues haz algo. Esta accin se encuentra en la misma lnea de cdigo. se puede traducir por ubicacin e identifica la URL de la pgina que se encuentra en la barra de direcciones, como por ejemplo: Si tu pgina se inserta dentro de un frame de otra web, aqu aparecer la direccin de la pgina. Para cambiar esta direccin, entra en accin al modificar la primera direccin por tu propia direccin dentro del frame. Esto es lo que hace esta lnea de cdigo. En caso de que se d esta circunstancia, primero podrs comprobar que la pgina se carga dentro de un frame .
Pero esta pgina slo aparece unos instantes, ya que despus, tras una breve interrupcin, la web con el programa en Javascript aparece sola en pantalla .
Esta aplicacin slo la puedes utilizar si no tienes frames en tu pgina. En caso contrario el resultado no ser el deseado, ya que tambin los cerrar.
70
Profesional

Propiedad intelectual Proteccin para programas No pongas links a pginas piratas No copies enlaces sin ms Cuidado con los frames Sin faltar al respeto! Meta Tags 54 55 55 55 56 56 57
Pero, desgraciadamente, en la Red resulta bastante habitual que no se respeten estos derechos. En especial no se respetan con los archivos creados en formato MP3 03 (Pg.56) . Estas canciones digitalizadas 04(Pg.56) se pueden bajar de muchas pginas web.Y en muchos casos se trata de obras sobre las que existen derechos de autor. Entre stas, puedes encontrar tanto los temas musicales de mxima actualidad, como piezas clsicas interpretadas por una orquesta filarmnica.
Respeta siempre los derechos de autor

Si te compras un compacto puedes hacer con total libertad copias en MP3 para tu uso particular sin ningn problema (recuerda que slo para uso exclusivamente PARTICULAR). Pero si tu intencin es utilizar estas copias para publicarlas en Internet y as permitir a los visitantes de tu pgina que se las bajen libremente, entonces ests lesionando los derechos del autor. Esto tambin vale para un simple fragmento. No hagas caso del rumor que dice que se pueden colgar en Internet tres compases o siete se-
Pero si yo no he hecho nada! Por qu me encierran? Si no te apetece acabar as, lo mejor ser que leas de arriba a abajo la decimotercera y ltima entrega de este curso sobre programacin en HTML. Luego no digas que no te avisamos.
E
54
n las doce entregas anteriores del curso de HTML 01 (Pg.56) de Computer Hoy has dado un repaso a la construccin de pginas para que funcionen sin problemas y tengan un aspecto profesional. As entrars con buen pie en la World Wide Web 02 (Pg.56) . Pero no basta slo
con programar y redactar los textos. El da a da en la Red tambin te enfrenta con cuestiones legales que no puedes obviar.En esta ltima entrega del curso vas a conocer todo lo que hay que tener en cuenta a la hora de publicar una pgina en Internet y as no te buscars ningn problema.
Propiedad intelectual
La propiedad intelectual tambin tiene validez en Internet y garantiza al autor, artista o msico los derechos sobre su obra, permitindole decidir dnde y en qu forma se publican sus textos, libros, etctera
N 48
Fundamentos: crear el primer archivo HTML Cmo disear y dar formato a los textos Para principiantes Listas, barras y vnculos Insertar imgenes Distintos formatos de escritura Divisin de pginas con tablas Para expertos Insertar y dimensionar marcos Ejemplo de formulario Qu son y para qu sirven los identificadores Conceptos bsicos del estilo en cascada Para profesionales HTML con Java Probando las pginas HTML Principios legales de las pginas de Internet
Foto: Cordon Press. Montaje: Computer Hoy.
35 37 38 39 40 41 42 43 44 45 46 47 48

gundos de una pieza musical sin vulnenar los derechos de autor. La nica excepcin es que el autor te permita distribuir sus trabajos desde tu pgina web. Esto tambin es vlido para los dibujos y los textos. As, por ejemplo, te puedes buscar problemas si decides insertar en tu homepage 05 (Pg.56) un artculo de otra publicacin. Ni los fans estn a salvo de los abogados de las estrellas de televisin y del mundo musical cuando deciden publicar, sin su permiso, sus piezas en la red. Si tienes intencin de insertar en tu web imgenes de personajes o escenas de tu serie favorita, debes saber que esta prctica no es del agrado de muchos productores. Grupos musicales como Oasis, as como la cadena de televisin americana Fox, han ganado recientemente pleitos contra usuarios que incluyeron en sus pginas, sin su consentimiento, imgenes o canciones de stos. Si quieres usar algn documento de este tipo, te recomendamos que te pongas en contacto con el autor para que te d su consentimiento. Slo cuando lo obtengas podrs usarlos. blicar en la Red sin tener que pedir permiso a nadie . Pero evita copiar sin ms bases de datos completas o parte de ellas. Tambin los documentos pblicos, como sentencias judiciales, no estn sujetos a la propiedad intelectual. Puedes publicar estos textos en la Red, pero debes indicar su fuente.
Profesional
Proteccin para programas

A la hora de colgar programas en Internet para que los visitantes de tu pgina web puedan descargarlos 06 (Pg.57) , pon especial cuidado. Distribuir copias piratas de programas en la Red es un delito que est penado, incluso aunque no sepas que la aplicacin en cuestin es una copia ilegal (recuerda que el desconocimiento de las leyes no exime de su cumplimiento). Cuidado con las copias de distribucin gratuita. Incluso los programas shareware 07 (Pg.57) que estn a libre disposicin de los usuarios, como Internet Explorer, estn sujetos a determinadas reglas. stas te indican dnde y cmo se pueden distribuir. Repasa con detenimiento la licencia del contrato de cada uno de estos. Si dudas, ponte en contacto con el fabricante del programa.
Aviso a los fans. Ni con la mejor de las intenciones est permitido reproducir material grfico o sonoro de tus dolos. Grupos como Oasis ya han recurrido a los tribunales.
En caso de duda, no reproduzcas nada

Los documentos que contienen datos de caracter general (pblico), como por ejemplo los nmeros de la Lotera Primitiva o los ndices burstiles, se pueden pu-
disponer de links 08 (Pg.57) a otras pginas. Pero, cuidado, algunos enlaces te pueden crear problemas, en especial si llevan a pginas ilegales. Un enlace a una de stas tambin te puede causar problemas. Lo mismo ocurre cuando los enlaces se dirigen a pginas que contienen copias ilegales de ficheros MP3 o material que contraviene cualquier norma legal (pedofilia, racismo, etctera). Un enlace ilegal no tiene porque significar una condena, pero las posibilidades de que se abra un procedimiento judicial contra ti sern mayores.
No copies enlaces sin ms

No te dediques a copiar listas de enlaces de otra pgina, ya que, dependiendo de la longitud de stas, se
puede considerar como una base de datos y est prohibido copiarlas. Esto es debido a que las bases de datos son costosas, tanto su creacin como su mantenimiento y actualizacin.
La opinin de un abogado
der que facilitan que se cometa un ilcito y, por tanto, acabar siendo objeto de investigacin judicial, comenta Frhbeck. Y lo mismo con contenidos (o enlaces) relacionados con asuntos claramente ilegales (racismo, pedofilia, terrorismo, etc...). En la difusin de datos personales, aconseja tener en cuenta la ley que regula sutratamiento, LORTAD, y sus restricciones. Tambin dice que injurias y calumnias a travs de la Red son ilcitas: Con el agravante de que se hacen con publicidad. Cuando se utilizan nombres o marcas registradas para atraer a visitantes a una web propia, cree que puede entenderse que se estn transgrediendo las normas de la Ley de Competencia Desleal (aprovechamiento de imgenes, marca...). Si eres objeto de una reclamacin, Frhbeck aconseja acudir a un abogado que evale el alcance de la infraccin, la corrijas e intentes llegar a un acuerdo amistoso.
No pongas links a pginas piratas

Una buena pgina web tambin se caracteriza por
La mayora de los links son legales

A excepcin de los enlaces que se han descrito en los apartados precedentes, puedes insertar en tu pgina todos los links que te d la gana. Te recomendamos, no obstante,que indiques quin es el autor de aquellas pginas cuyo contenido te resulte dudoso.Y recuerda,en caso de duda, es mejor un enlace menos que un problema ms. Tampoco es lcito el insertar un comentario que falte al respeto a una tercera persona. Por ejemplo, si nombras un enlace a la pgina de un compaero de trabajo como la web del idiota del mes, puedes tener problemas legales adems de los que surjan en la relacin personal!
N 48
El software de libre distribucin no puede ser distribuido a la ligera. revisa los los terminos de la licencia de distribucin antes de ofrecrselo a quienes se conecten a tu web.
Guillermo Frhbeck, asesor legal de Hobby Press Aunque se diga que la comisin de ilcitos en Internet apenas est regulada, hay quien cree que no es del todo cierto, ya que unas normas de carcter sustantivo son aplicables a la Red. El asesor legal de Hobby Press lo reafirma con el ejemplo de la vulneracin de los derechos de autor: La reproduccin de contenidos (msica, imgenes o programas) sin autorizacin expresa de su titular supone una violacin de esos derechos y puede dar lugar a acciones judiciales. Aun si el material no est sometido a esa proteccin es recomendable citar la fuente. Con respecto al asunto de los links que enlazan con pginas desde las que sea posible obtener programas, canciones, etctera, sin la autorizacin del titular delregistro, se podra enten-
55
Profesional
01
HTML
Lenguaje de programacin de pginas web. Se escribe haciendo uso de identificadores. Creado en 1989 en el CERN (laboratorio europeo de fsica de partculas), su objetivo era ser un mtodo nico de bsqueda de informacin y acceso universal a la misma, eliminando la necesidad de usar distintas aplicaciones para este fin.
02
En la pgina 70 del nmero 46 de Computer Hoy, dentro de la undcima entrega del curso de HTML, en la que viste una introduccin a Javascript, puedes ver cmo conseguir que tu pgina no aparezca dentro del frame de otra.
Sin faltar al respeto!

Por desgracia, en Internet cada vez es ms habitual encontrar pginas ofensivas hacia terceras personas. Pero cuidado, la Ley tambin es vlida en Internet. Es decir, si faltas al respeto a terceras personas puede que tengas que rendir cuentas ante la Justicia. No insultes ni ofendas a terceras personas, asociaciones o empresas.Tampoco permitas que a travs de tu pgina, como por ejemplo dentro de un libro de visitas, otros hagan lo mismo.
World Wide Web
En castellano la tela de araa mundial, es la parte grfica de Internet. En ella se pueden representar textos, imgenes, pelculas o piezas musicales. La WWW (como tambin se la denomina) se compone en la actualidad de ms de 1.000 millones de pginas con todo tipo de informacin. Cada da se incluyen nuevas pginas.
03
La inclusin de pginas web de otras personas o empresas dentro de un marco de la tuya puede acarrearte serios problemas si no queda claro el origen de las primeras.
Cuidado con los frames

Por si no lo sabas, los marcos 09 son un asunto peliagudo. El problema estriba en que los usuarios de
frames dividen sus pginas en varias zonas. Normalmente hay un marco que contiene un ndice cuyo fin es facilitar la visita de la pgina. El segundo frame de
MP3
La opinin de la Polica
de la injuria directa, calumnia, amenaza.... Para los responsables de esta Unidad, la lnea entre lo que es delito y lo que no es muy fina: No hay una norma que prohiba facilitar direcciones de email, aunque no se cuente con la autorizacin del propietario. Afirman que est ms claro en el uso de productos con copyright, ya que hay leyes sobre propiedad intelectual. De todos modos, aqu slo actan cuando reciben una denuncia del propietario afectado, de lo contrario sobreentienden que las obras han sido cedidas. Aunque depende del contenido. Si se ofrece una base de datos o un libro en la web como propios se persigue, porque alguien quiere aprovecharse. Pero si se incluye un link a otra web indicando que es propiedad de otro no creemos que ningn juez lo considerara delito, afirman. Como tampoco es incluir en un marco de una web otra pgina ajena si queda claro de quien es propiedad.
N 48
Es un formato de compresin para ficheros de sonido. El nombre de MP3 viene de la abreviatura de MPEG-Layer3 y se refiere a un algoritmo basado en un complejo modelo acstico. En los ltimos tiempos se ha popularizado, debido a la gran calidad que ofrece, permitiendo ratios de compresin cercanos al 90%.
04
U. de Investigacin de Delincuencia en Tecnologas de la Informacin. En Computer Hoy quisimos recabar la opinin de la Polica respecto a las facilidades que tiene para perseguir este tipo de delitos: La legislacin tiene muchas lagunas, pero se cuenta con el apoyo de jueces y fiscales para clarificar aspectos. As, con las intrusiones y links en las webs es donde la legislacin no se ha adaptado a lo que ocurre en la sociedad. Pero si el contenido es ilegal, ya sea incluir un enlace o colocar informacin que sea apologa de alguna actividad penada o considerada acto delictivo en el mundo real, tambin lo es en la Red. Es el caso
Digitalizar
Los aparatos electrnicos almacenan la informacin como una serie de unos y ceros. Pero las seales de sonido y vdeo no son digitales, por lo que hay que convertirlas. Este proceso recibe el nombre de digitalizacin.
05
mayor tamao contiene otra pgina que puede no ser propia. No todos los diseadores de pginas web aceptan esta prctica. De todas formas, la experiencia seala que la insercin dentro de un frame de contenidos ajenos puede acabar acarrendote problemas si no indicas el origen de la pgina. Por razones de precaucin, nuestro consejo es que evites insertar pginas ajenas dentro de un frame. Con independencia de los aspectos legales, est claro que a nadie le resulta agradable estar pelendose con los marcos. Por ejemplo, dentro de un frame no se puede ver la direccin de la pgina que se est visitando.Y si, adems, tienes un monitor pequeo, el marco se come mucho espacio. Pero si an as deseas insertar una pgina ajena dentro de un frame, te aconsenjamos que antes te pongas en contacto con el dueo de la pgina para pedirle el correspondiente permiso.
Un insulto te puede ocasionar problemas

Esto puede ser muy grave si la persona a la que se hace referencia se puede identificar con facilidad. De nada te va a servir que acortes, por ejemplo, el nombre de este individuo. En localidades pequeas slo hacen falta las iniciales de un nombre para identificar a una persona. Y cuidado con las imgenes que van acompaadas de un texto denigrante. Est prohibido publicar fotografias de terceras personas, aunque omitas su nombre y tapes sus ojos con una banda oscura. Slo hace falta que una persona sea capaz de reconocer a ese individuo para que puedas te-
Homepage
La mayora de personas o empresas aparecen en Internet con varias pginas propias que se encuentran enlazadas entre s. En este caso, a la pgina principal se la conoce de esta manera.
Si haces algo as estars cometiendo dos delitos: injuria y difusin de datos personales.
56

ner problemas legales. Hay muchas personas a las que se les identifica muy fcilmente por su vestimenta o por determinadas facciones de su cara. Tambin el entorno fsico o familiar pueden ser un punto de referencia para identificar a una persona.
Profesional
06
Descargar
Al expresar tus opiniones ten cuidado

Si te dedicas a publicar textos en Internet y te ajustas a la realidad no vas a tener nunca problemas. Esto no quiere decir que no puedas dar tu opinin. Pero cuidado, no te excedas. Las direcciones de email privadas tambin estn protegidas por la ley. No se pueden publicar sin el permiso de su titular.
Dentro de la red Internet existen muchos ordenadores a los cuales puedes acceder para copiar ficheros al tuyo. Esta operacin se denomina descarga de ficheros. sto se puede realizar desde el navegador, haciendo click en los enlaces que representen los archivos, o mediante sistemas y programas especialmente pensados para la descarga, como el FTP.
07
Shareware
Meta Tags
Recientemente ha surgido una polmica con la bsqueda de pginas en Internet. Algunos usuarios utilizan el truco de insertans nombres comerciales y marcas de empresas conocidas en los Meta Tags. Con ello se consigue que el resultado de una bsqueda incluya, adems de las pginas de la empresa titular del nombre, las pginas de aquellos que insertan este nombre en un campo Meta. Tampoco se ajusta a derecho el truco de incluir en la pgina de una empresa el nombre comercial de la competencia. En especial cuando el fin de esta prctica sea que aparezca el nombre de la empresa cuando se est buscando la pgina de la competencia. En estos casos se suele acabar ante los tribunales. Ahora ya sabes todo lo que no puedes insertar en tu pgina web. La lista de prohibiciones parece ms grave de lo que realmente es. Si te cies a tu propio trabajo y en tu pgina slo insertas fotos y textos propios, no vas a tener ningn problema. Adems, resulta ms original crear tus propios contenidos en vez de recurrir a los de los dems. Pero si deseas insertar contenidos de otras pginas,
Quiz pueda resultar tentador copiar sin ms un listado de enlaces de otra pgina web. Sin embargo, no lo ser tanto cuando descubras que esta prctica es totalmente ilegal, ya que, en el mejor de los casos, vulnera los derechos de autor. Adems, si contiene datos de tipo personal, estars enfrentndote a la ley LORTAD (regulacin del tratamiento de datos).
Son programas de demostracin que se pueden probar durante un tiempo determinado o que no incluyen todas sus funciones. Se distribuyen gratuitamente a travs de Internet o en CD. Para obtener la versin completa hay que pagar una cantidad determinada al autor.
08
te recomendamos que te pongas en contacto con el titular de la web. Lo ms grave que puede pasar es que te diga que no.Tambin puedes llevarte una agradable sorpresa porque al titular de la web le parezca genial que desees publicar sus contenidos dentro de tu pgina.
Link
Asociacin Internautas
porque se estara incurriendo en una ilegalidad: Legalmente, estas pginas no deberan existir pues nuestras leyes no permiten estas actividades. Sobre la utilizacin de textos, imgenes, programas. etctera... en una web, el responsable de la Asociacin considera lgico y tico que se cite la fuente de informacin, tal como pasa en los medios de comunicacin tradicionales. Con respecto al uso de ficheros musicales MP3 este asunto no est nada claro... en estos momentos hay varios contenciosos abiertos en EEUU. Para Victor Domingo, la mayora de los internautas se suele ajustar a la legalidad vigente y cuando algo no est claro si es legal o ilegal se atiende a la Netiqueta, normas que rigen las relaciones en la Red, y al sentido comn. Desde luego, no todo el mundo se atiene a estas normas y es aqu donde deben intervenir los servicios jurdicos tradicionales.
Victor Domingo, Asociacin de internautas Aunque desde la Asociacin de Internautas se insiste en que lo que es delito en la vida real tambin lo es en la Red, se recuerda adems que Internet an no est regulado. As, hay actividades que no son ilegales, pero que los internautas consideran contrarias a la convivencia: Es el caso del spamming, o envo masivo de correos electrnicos no solicitados. Tampoco es tico, y posiblemente tampoco legal, que se introduzcan en la Red los datos personales. La Agencia de Proteccin de Datos tiene abiertos varios expedientes en este sentido, dice Domingo. Respecto a las pginas que incitan al racismo, terrorismo o pedofilia, los responsables de la Asociacin creen que no es lgico crear enlaces a este tipo de webs
N 48
Pon cuidado y no tendrs problemas

Y esto es todo, como podrs comprobar, la mayora de las cuestiones legales son similares a las que se aplican en la vida real. Lo mejor es contar con el mejor aliado en estos casos (el sentido comn) y, en caso de duda, actuar con cuidado. Siguiendo esta mxima no tendrs problemas. Pues ya se puede decir que eres un autntico webmaster, formado en todos los aspectos necesarios para desarrollar tu web personal (o quien sabe si, incluso, dedicarte a ello profesionalmente). En Computer Hoy esperamos que hayas disfrutado con este curso y que pases a formar parte del medio de comunicacin ms importante del mundo: Internet.
Tambin se conoce como enlace o vnculo. Es una referencia a otra pgina que se encuentra en la red Internet. Se suele distinguir por tener un color distinto al resto del texto, estar subrayado o representado por una imagen. Al hacer click sobre l, el navegador carga la pgina correspondiente.
09
Marcos
Tambin llamados frames, son la divisin de una pgina en varios apartados. Se utilizan en el diseo de pginas web para organizar la informacin y facilitar el acceso a ella. Cuando se divide una web en secciones que pueden mostrar pginas web independientes, a cada una de estas secciones se la denomina marco o frame. Al contenedor que incluye el grupo de marcos se le llama pgina de marcos. Tambin se suele utilizar para crear tablas de contenido, que permanecen en pantalla mientras te desplazas por la web.
57

Programación en HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programación en HTML

Cargado por

Copyright:

Formatos disponibles

Profesional

Programacin en HTML, 1 Parte

plorer de Microsoft y seguir los pasos siguientes:

Foto: Super Stock. Montaje: Computer Hoy.

que normalmente estar en el escritorio 05 (Pg. 68) .

Programacin en HTML, 1 Parte

Escribe la cuarta, quinta y sexta filas:

que utilizars para escribir tu primer ejemplo.

Nuestro primer documento

Cierra el Bloc de notas y el Internet Explorer haciendo click sobre .

pulsando la tecla $ al final de cada una.

Programacin en HTML, 1 Parte

Haz click en y en para ver de nuevo el texto HTML de la pgina:

Primero haz click sobre la pestaa .

Haz click en en la casilla aparecer el

Haz click en la carpeta

Ver nuestra primera pgina HTML

podrs visualizar el archivo en el navegador:

Navegadores para disear HTML

Programacin en HTML, 1 Parte

aparezca el nombre de tu pgina: .

Para abrir el archivo haz click en . Haz click justo detrs de

Para cerrar el navegador Internet Explorer puedes pulsar sobre .

Ms texto para nuestra pgina

Cargar la pgina rpidamente

Abre el editor de textos haciendo click en , , y .

Inicia el navegador Microsoft Internet Explorer

Haz click en y . Aparecer la ventana de dilogo:

texto la ventana del editor tendr este aspecto

Haciendo click en el botn

se desplegar la lista donde debemos seleccionar la entrada

Programacin en HTML, 2a Parte

Disear una plantilla de trabajo

En la primera lnea de texto tendrs que escribir

Pulsa la tecla $ y escribe .

y pulsar la tecla $ . El cursor se situar en la segunda lnea

Foto: PICTOR uniphoto. Montaje: Computer Hoy.

Programacin en HTML, 2a Parte

Haz doble click sobre el icono

Introduce un nombre de archivo. Por ejem-

que se encuentra en el Escritorio 05 (Pg 76) .

Por ltimo, cierra la ventana con un click sobre .

Aparecer un men en el que tienes que seleccionar la opcin .

Despus de guardar el archivo, cierra el editor haciendo click en el smbolo .

Resumen de este captulo

Programacin en HTML, 2a Parte

En la siguiente ventana de dilogo aparecer el contenido de la carpeta

Cierra el editor haciendo click en .

Abre tu navegador y carga el documento. Si no recuerdas cmo se ha-

Cuando introduzcas un comando de salto de lnea debes pulsar la tecla $ .

De esta forma tambin se mostrarn tus archivos HTML .

Programacin en HTML, 2a Parte

El documento completo tendr el aspecto siguiente.

modo la ventana del navegador quedar ms pequea. Pero el texto se ajustar

lnea deben concordar ahora con las lneas .

Trabajar con prrafos

Despus de introducir , pulsa $ y escribe algo ms de texto. Por ejemplo: .

Abrir archivos HTML rpidamente

Programacin en HTML, 3 Parte

Utiliza ttulos para resaltar el texto

A continuacin aparecer la ventana del editor:

Programacin en HTML, 3a Parte

Pulsa la pestaa y selecciona la opcin .

que se encuentra en el Escritorio 08 (Pg. 60) .