Curso:Creación de páginas web en HTML,1ª parte · 72 Nº 126 Curso:Creación de páginas web en...

Nº 12672

Curso: Creación de páginas web en HTML, 1ª parte

¿A qué estás esperando? ¡El mundo necesita saber de tus hobbys, ver las fotos de tusvacaciones, conocer lo que piensas de los temas de actualidad! Haz una web ¡Ya! ¿Cómo? ¿Que no sabes? Pues ya no tienes excusa. Te enseñamos en este nuevo curso.

B romas aparte, lo de ha-cer una página web noes ninguna tontería.Pue-

de ser muy práctica paramuchas cosas. Dar publici-dad a tu negocio, o inclusopara hacer ventas a travésde ella,publicar tus propiosartículos y relatos, tener aldía a tus familiares y amigosde todas las novedades quese produzcan en tu vida... la

lista de ejemplos puede serinterminable. Lo mejor esque no necesitas práctica-mente nada para crearla, so-bre todo si la programas túdirectamente en HTML.

¿Qué es HTML?La abreviatura correspondea HyperText Markup Lan-guage,o Lenguaje de Marcasde Hipertexto. Es un len-guaje , con el que se di-señan las páginas web. Porejemplo,determinar en quélugar del documento se de-ben ver las imágenes, los tex-tos o los gráficos.Con HTML se puede tam-bién dar formato a los tex-

01

tos, es decir, configurar el ti-po, el color y el tamaño dela fuente.Los archivos HTMLse reconocen por la exten-sión html o htm.

¿Cómo son loscomandos HTML?Las instrucciones HTML seconocen como “tags” o eti-quetas. Siempre comienzancon el signo < y terminancon >. La instrucción en

sí misma apare-ce entre estos símbolos.Así, porejemplo, los tags<html> y </html>caracterizan elprincipio y el fi-nal de un docu-mento HTML.Es posible ver elcódigo fuente HTML de práctica-mente cualquierpágina web que vi-sites en Internet.Pa-ra ello sólo necesi-tas ejecutar el nave-gador, y abrir unapágina cualquiera,por ejemplo la webde nuestra revistawww.computerhoy.esDebajo de esta “facha-da” se esconden mu-chas instruccionesHTML, que podrás versi haces click en y en .Con ello se abrirá un

editor que mostrará lapágina “por dentro”.En ésta y en las siguientestres entregas de este cursote enseñaremos a usar estasetiquetas para hacer tu pro-pia página web. En las cap-turas de los ejemplos hemosresaltado, para mayor clari-dad, las etiquetas que se co-mentan en cada caso.

¿Qué voy a necesitar?Para escribir código fuentees suficiente un sencillo edi-tor de texto,como el Bloc deNotas. Para comprobar queestán bien y, naturalmente,para ver las páginas, necesi-tas un navegador. Y para col-garla tienes que disponer deuna conexión a Internet, deespacio en un servidor web

y del software necesariopara enviarle los archivos.03

02

Tu primera página web 73Modificarel estilo del texto 73El color en la web 75

Puedes hacer la prueba. Abre con cualquier navegador de Internet una página web y selecciona en el menú “Ver” la opción“Código fuente”. Se abrirá un editor que te mostará las “tripas” del documento.

Principios y estructura básica de HTML Nº 126Imágenes y gráficos animados Nº 127Enlaces y hojas de estilo Nº 128Tablas y marcos Nº 129

126_72_75_PROGRAMACION 21/7/03 12:48 Página 72

http://www.computerhoy.es

Nº 126 73


LenguajeConjunto de instruccionesque permiten especificarun proceso al ordenador.Los lenguajes de progra-mación, los más comu-nes, se usan para no te-ner que aprender lascomplicadas instruccio-nes formadas por unos yceros del código máqui-na, el único lenguaje que“habla” el procesador.

Código fuenteInstrucciones y expresio-nes de un programa tal ycomo fueron escritas porel programador en un len-guaje determinado.

Servidor webOrdenador que aloja do-cumentos HTML en Inter-net. Éste debe disponerde un servidor HTTP

, un programa queprocesa las peticionesque llegan en dicho pro-tocolo, y da al cliente unarespuesta con la informa-ción solicitada.

HTTPHyper Text Transfer Pro-tocol (Protocolo de Trans-ferencia de Hipertexto).Protocolo de comunica-ciones usado en la WWW.Su principal misión escontactar con las páginasweb y transmitirlas al ne-vegador del cliente.

Hojas de estilo También llamadas dise-ños de página. Formatoañadido a un archivoHTML que contiene el esquema maestro del aspecto del documento.Especifica márgenes,fuentes, tamaños, pies de página...

ScriptConjunto de instruccionespensado para que los eje-cute otro programa y noel procesador. Hay len-guajes de programación,como JavaScript, conce-bidos como “lenguajesscript” y con los que seescriben programas parapáginas web.

06

05

04

04

03

02

01

�

La mejor forma de empe-zar este curso es, por su-puesto, diseñar una páginaweb.Y eso es ni más ni me-nos lo que vas a hacer.

1Lo primero es abrir uneditor de texto. El Bloc

de Notas de Windows te ser-virá a la perfección. Hazclick en y luego en-cima de . Escribedentro del campo de textola expresión yaprieta la tecla C.

2 Ahora tienes que escri-bir el código fuente de

la página. Introduce las si-guientes líneas en la venta-na del editor:

La verdad es que la pági-na que hemos diseñado esun poco sosa, ¿no te pare-ce? ¿Te gustaría poder mo-dificar el tamaño, color y lafuente del texto de tu web?Te enseñamos a hacerlo.

1Cierra el navegador yhaz click con el botón

derecho encima de

coloca ahora el cursor so-bre y pincha en lalista en la entrada

2Empieza escribiendo untexto más extenso en el

cuerpo del documento, es

decir, entre los tags <body>y </body>, como por ejem-plo éste:Cada vez que quieras intro-ducir un retorno de carro (osalto de línea), puedes utili-zar la etiqueta <br>

3Haz click en el menúy luego, en la

lista que se despliega, enci-ma de la entrada llamada

. A conti-nuación introduce ya en elcampo de texto situadojunto a un nom-bre nuevo para el fichero yasí no “machacar” el que yacreaste antes, por ejemplo

, y aprieta enci-ma del botón .

3 La instrucción <html>se coloca siempre al

principio de un documentoHTML. Entre las etiquetas<head> y </head> está la ca-becera de la página web. Enella se introduce la infor-mación que normalmenteno aparece al visualizarlo,como hojas de estilo ,scripts , etc. O el nom-bre de la página, que debesituarse entre los tags <title> y </title> y que luego semostrará en la Barra de tí-tulo de la ventana del nave-gador. El cuerpo de la pági-na, el texto que se verá alabrir el documento, está li-mitado por las instruccio-nes <body> y </body> que

0605

sirven de límites al textoque luego se leerá en la pá-gina.Al final debe aparecerla orden </html>, que cierrael archivo HTML.

4Ahora guarda el archivo.Para ello pulsa en el me-

nú y a continuaciónen la lista que se despliegaen .

5 Si quieres almacenarloen una nueva carpeta,

escoge su ubicación,pinchasobre el icono , y a con-tinuación dale un nombre,por ejemplo ,y aprieta C.

6Ahora haz click encimade la flecha

y selecciona en la lista la en-trada .

Luego escribe en el campode introducción de datos alefecto el nombre y exten-sión que quieras darle al ar-chivo, , y lue-go pulsa encima del botónllamado . Cierra elBloc de Notas pinchandosobre el botón .

7 Finalmente, dirígete a lacarpeta que has creado,

ábrela, y haz doble click en-cima del icono del archivoHTML que has generado:

Con ello se abrirá una ven-tana del navegador de In-ternet para mostrar el do-cumento:

Tu primera página web

Modificar el estilo del texto


Nº 12674


4A continuación, pulsados veces en el icono

para ver el resultado:

Como puedes ver, el textose interrumpe en los luga-res en los que se ha coloca-do el símbolo <br>.

5Existe una forma mássencilla de lograr que el

texto se muestre de manera“ordenada”en la pantalla.Lasetiquetas <p> y </p> se ocu-pan de que los textos máslargos se dividan automáti-camente en párrafos.Así queborra todas las instrucciones<br> e introduce al comien-zo y al final de cada frase di-chas instrucciones.

6Presiona la tecla ¡ y,sin soltarla, pulsa en la

letra g para guardar así loscambios.A continuación vea la ventana del navegadory aprieta en el icono o sobre la tecla 5 pa-ra actualizar la pági-na. Observa comoahora el texto se divide “élsolito”, de forma clara, endistintos párrafos.La longitud de las líneasquedará fijada por el anchode la ventana:

7Éstas no son, ni muchomenos, todas las posi-

bilidades que tienes paraeditar textos. Por ejemplo,con <h1> y </h1> puedesresaltar titulares. Pruébalo.Sustituye los tags <p> y</p> (antes y después de lalínea de bienvenida) por<h1> y </h1>. Repite el pa-so 6 para de este modoguardar todos los cambiosque has realizado y actua-lizar la página:

8 Puedes controlar el ta-maño del titular por

medio de la cifra que con-tiene la etiqueta.Así, si enlugar de <h1> y </h1> in-troduces <h3> y </h3>, la lí-nea será más pequeña:

9Pincha detrás de </h1>o </h3> –en función del

que hayas decidido usar– ypresiona C. Introduce <hr>y presiona de nuevo C.

10 Cuando ahora repi-tas el paso 6 verás

que con ello aparecerá unafina línea debajo del titular:

11Vas a seguir proban-do distintos tipos de

formato.Así que modifica eltexto de esta forma:Por medio de la etiqueta<ul> introduces lo que sedenomina una lista. Cadauno de los elementos in-dependientes de esta lista

se marcan por medio de lainstrucción <li>, y ésta secierra con </ul>.

12 Repite el paso 6 yobserva ahora el re-

sultado:En lugar del tag <ul>, tam-bién puedes utilizar <ol>. Elresultado sería una lista nu-merada:

13Con HTML tambiénpuedes configurar el

tipo y el color de la fuente.Vuelve a modificar el códi-go fuente del documento deesta forma:

14Por medio de <fontface “Courier”> se

modifica la fuente del textosituado a continuación, yhasta la etiqueta </font>. Siolvidas añadir esta última,la edición afectará a todaslas líneas hasta el final del

documento. Con las ins-trucciones <b>, </b>, <i> e</i> puedes hacer que lostextos se muestren en ne-grita y en cursiva.

15Para modificar tam-bién el color del texto

has utilizado la orden <fontcolor = “aqua”>.Para especifi-car el color puedes utilizar un“alias”, como en este ejem-plo,o su código hexadecimal.En este caso, la instrucciónsería <font color=”00ffff”>Puedes ver algunos de ellos

en el recuadro situado en lasiguiente página.

16Repite el paso 6 pa-ra guardar el archivo

y actualizarlo.Tu página aho-ra debe tener más o menoseste aspecto:

17Y para terminar,pue-des incluir un “últi-

mo retoque”,añadiendo unagran letra mayúscula al prin-cipio del párrafo, lo que sedenomina una letra capitu-lar.Para ello debes modificarel código de esta forma:Asegúrate de incluir la letraque quieres “engordar” en-tre las dos etiquetas.


Nº 126 75

�

18 Repite de nuevo el pa-so 6 y observa el resul-

tado:¡Enhorabuena! ¡Ya has creadotu primera página web!

En la siguiente entrega del cur-so te enseñaremos, entre otrascosas,cómo puedes insertar ar-chivos de imágenes en un do-cumento HTML.

El color en la webEl color en la web

aqua #00ffffblack #000000blue #0000fffuchsia #ff00ffgray #808080green #008000lime #00ff00maroon #800000navy #000080olive #808000purple #800080red #ff0000teal #008080silver #c0c0c0white #ffffffyellow #ffff00

Los “alias” suelen ser, simple-mente, el nombre del color eninglés. Si no conoces alguno,puedes intentar traducirlo. Porejemplo, si no conoces el alias oel código del naranja, pruebacon “orange” (por cierto, en estecaso habrás acertado).Respecto al valor hexadecimal,es posible emplear un programade retoque fotográfico, comoPhotoshop o Paint Shop Pro. Supaleta de colores te mostrará elcódigo hexadecimal de cualquiermatiz que quieras emplear:


Nº 12760

Curso HTML, 2ª parte

Si quieres que tu página web le llame la atención a alguien másque a amigos y familiares tendrás que darle un poco de “sabor”.Nada mejor que unas cuantas imágenes para animarla un poco.

A nadie le gusta ver pági-nas web en las que sólohaya texto.Ya no esta-

mos en la “prehistoria” deInternet, ahora prima todolo “multimedia”, y cuantomás,mejor. Por suerte, esmuy sencillo añadir fotos ytodo tipo de elementos grá-ficos a un documento HTMLy de este modo darle un as-pecto mucho más atractivo.

¿Qué imágenespuedo utilizar?

En principio, cualquiera.Desde fotos que has hechocon una cámara de carretey que has digitalizado conayuda de un escáner a lasque hayas descargado en tudisco duro desde tu cáma-ra digital o desde Internet.En este último caso, ten

cuidado.Asegúrate antes deque se trata de imágenesgratuitas, de las que puedesdisponer libremente, o pí-dele autorización al “pro-pietario intelectual” antesde publicarlas.

¿Pueden estaren cualquier formato de imagen?

No. La imagen debe estaren formato GIFo JPEG . Es laúnica forma de asegurarte deque se muestre correcta-mente con cualquier nave-gador. Se trata de formatosque permiten almacenar laimagen de forma comprimi-da,es decir, archivos que norequieren usar mucha me-moria. La ventaja de esto esmuy clara. Se pueden trans-ferir más cómodamente através de Internet,y ocupanmucho menos espacio en elservidor web en el que estéalojada la página. JPEG sepueden representar hasta

16,7 millones de colores dis-tintos, mientras que GIF só-lo consigue 256 colores.Ade-más,a diferencia del anteriorno permite utilizar distintosniveles de compresión. Poreso JPEG es el más usado pa-ra fotos y en general imáge-nes que requieren cierta ca-lidad.GIF tiene también susventajas,ya que permite cre-ar imágenes en movimientoy usar fondos transparentes.

Para ambos casos es váli-do un último consejo. In-tenta buscar el equilibrioentre tamaño y calidad dela imagen. Ésta se resentirási reduces demasiado la re-solución paraahorrar espacio.

¿Cómo lograrimágenes enmovimiento?

Te será posible tanto des-cargar los GIF animados

de forma gratui-ta desde Internet como cre-arlos tú mismo.

04 (pág. 62)

03 (pág. 62)

02 (pág. 62)01 (pág. 62)

Colocar y organizar las imágenes en la página 60Modificar el fondo de una página web 62Hacer que lasimágenes cambien 63

Trucos 64

En este apartado te vamosa enseñar cómo se insertanimágenes en una páginaweb, y también cómo orga-nizarlas.Para ello seguiremosusando la página dedicada aEl Puerto de Santa María,queya creamos en la anterior en-trega del curso.

1Antes de empezar a tra-bajar en el documento

HTML,asegúrate de disponerde las imágenes que vas ausar.Si se trata de tus propiasfotos, esto no supondrá nin-gún problema, tan sólo ase-gúrate de que no “pesan”de-masiado para colgarlas enInternet. Si no, hay muchaswebs en las que encontrarásimágenes que puedes des-cargar de forma gratuita yusar en tu propia página. Lasiguiente URLhttp://spain.linkworld.ws/Webmasters/Recursos/Galerias_de_Imagenes/ contiene enlaces amuchas de ellas.

2 Para bajarlos, una vezcargada la imagen en el

navegador,haz click encimade ella con el botón dere-

cho del ratón y pincha en elmenú que se despliega so-bre . Selec-ciona para almacenar los ar-chivos de imagen la mismacarpeta donde guardaste eldocumento HTML en el queestás trabajando,es decir, .

Dale un nombre, por ejem-plo , y cie-rra la ventana apretando en

. Repite el proceso–evidentemente, dando alos ficheros un nombre di-ferente– con todas las fotosque pretendas emplear.

3 Ahora ya puedes seguircon la construcción de

la página.Abre la carpeta

y haz click con el botón de-recho encima de .

A continuación sitúa el cur-sor encima de la entrada lla-mada y, en la lista

05 (pág. 62)

Colocar y organizar las imágenes en la página


Nº 127 61

Curso HTML, 2ª parte�

que se despliega, pincha so-bre el icono del Bloc de No-tas de Windows:

4 Ahora modifica el có-digo fuente de la si-

guiente forma:Vamos a dar un “repaso”a lasetiquetas, aunque ya las co-nozcas de la anterior entre-ga del curso.Con <html> seespecifica el comienzo deldocumento,que finaliza con</html>. Las instrucciones<head>, </head>, <title> y</title> comprenden la ca-becera y el título de la pági-na.<h1>, </h1>, <h3> y</h3> se utilizan para creartitulares de distinto tamaño.Entre los “tags” <body> y</body> se encuentra el tex-to que luego se leerá en lapágina. <p> y </p> se en-cargan de los saltos del tex-to.Lo único nuevo son las lí-neas resaltadas en coloramarillo. Con <img src =“imagen1.jpg”> se carga laprimera foto en la página.<img informa al navegadorde que se debe insertar unaimagen.La instrucción src =“Imagen1.jpg” determinadónde se encuentra la ima-gen.Se trata de una ruta “re-lativa”. Si no especificas na-da más, significa que elarchivo debe estar en la mis-ma carpeta que el docu-mento HTML.También pue-des especificar una ruta“absoluta”escribiendo la di-rección completa de un fi-chero situado en una car-peta diferente en el disco

duro o en el servidor. Lasotras imágenes se añadencon las instrucciones <imgsrc = “imagen2.jpg” e <imgsrc = “imagen3.jpg”>

5 Aprieta la tecla ,manténla presionada y

pulsa la tecla G . Con elloguardarás todos los cam-bios realizados ahora en elcódigo fuente.

6 Comprueba el resulta-do con un doble click

encima del icono

para que así el navegadormuestre tu página:

7 Para que el texto reco-rra las imágenes,en vez

de dejar espacios en blan-

co a su lado, escribe la ins-trucción align=left justo de-trás de “imagen1.jpg” e“imagen3.jpg” de modo quela etiqueta quede de estemodo:Detrás de “imagen2.jpg” es-cribe align=right.

8 Graba a continuaciónlas modificaciones co-

mo hemos descrito en elpaso 5. Para hacerlas visi-bles en la página, debes ac-tualizarla. Para ellohaz click una vez enel icono ,o bien aprieta la tecla ¶:

9 Desgraciadamente, si lohaces de este modo el

texto queda demasiado pe-gado a la foto. La buena no-ticia es que esto se puedecambiar de forma muy sen-

cilla. Detrás de las instruc-ciones introducidas en elpaso 7 añade ahora hspace=7, de manera que que-den así:Repite los pasos 5 y 8 paracomprobar el resultado:

10 Por medio de la cifraintroducida detrás

de hspace puedes determi-nar la distancia respecto a laimagen, que será mayorcuanto más elevado sea el

número. En caso de que ha-ya texto debajo o por enci-ma de una imagen, puedesutilizar la instrucción vspace, indicando del mismo mo-do que antes el espacio quequieres dejar.

11También se puedeespecificar el tama-

ño de la imagen. Para ellomodifica el texto como si-gue:Por medio de height=150

determinas la altura de laimagen. El navegador cal-cula automáticamente la an-chura manteniendo las pro-porciones. Si especificas elancho, la altura es la que secalcula de forma automáti-ca. Para el ancho se empleala instrucción width. Natu-ralmente, también es posi-ble determinar ambos va-lores, pero con ello puedeocurrir que la imagen apa-rezca distorsionada:


Nº 12762

Curso HTML, 2ª parte

12 Repite los pasos 5y8para comprobar el

resultado:

13 Las imágenes ani-madas se insertan

exactamente de la mismaforma. El “movimiento” esuna característica del ar-chivo, no hay que insertarcódigo HTML. Puedes des-cargar un GIF animado des-de Internet. Encontrarásmuchos gratuitos en la di-rección www.gifmania.com

14 Carga la página y se-lecciona, por ejem-

plo, la sección . Lue-go pincha en paraver las imágenes disponibles:

15 Pulsa encima deuna de ellas con el

botón derecho y haz clicken . Daleel nombre que quieras

y guarda el ficheroen la misma carpeta que los

anteriores. Pero no va-mos usarlo en nuestroejemplo. En su lugar,insertaremos nuestrapropia animación,quehemos creado en eltruco de la página 64.

16 A continuaciónmodifica el có-

digo fuente de la si-guiente forma:Una imagen móvil se in-

serta en la página de la mis-ma forma que una imagen“normal”. La instrucciónalign=left se ocupa de que laimagen aparezca a la iz-quierda, al lado del titular.Ytambién puedes ajustar su ta-maño para que “encaje”tal ycomo tú quieras.

17 Vuelve a repetir lospasos 5y 8para ver

cómo ha quedado:

En este apartado te ense-ñamos a añadir un fondo atu página web.

1Primero hay que pro-curarse una imagen. De

nuevo se te presentan va-rias alternativas a la hora deconseguirla. Es posible re-currir a Internet y descar-garla de alguna de las di-recciones que te hemosproporcionado, o bien pue-des crearla tú mismo tal ycomo te mostramos en lapágina 66. Una vez la ten-gas, guárdala en la carpeta

2 Vuelve a la ventana delBloc de Notas y añade

las siguientes instrucciones:Como ves, se consigue queel navegador reconozca laimagen como un fondo depágina por medio de back-ground.A su derecha se in-dica el nombre de la ima-gen, en este ejemplo así:=“fondo.jpg”.

3 Ahora repite los pasos5 y 8 del apartado an-

terior y comprueba qué talha quedado:Como ves, la imagen ocupapor completo el fondo de la

página,quedando el texto ylas imágenes por delante.

4 Si no se ven bien las le-tras debido al color del

fondo empleado, recuerdaque puedes modificar tan-

to éste como el tamaño y ti-po de la fuente usada. Tam-bién es posible hacer quealgunas partes se vean su-brayadas mediante las eti-quetas <u> y </u>. Por me-dio de size se determina el

Modificar el fondo de una página

GIFGraphics Interchange For-mat, o Formato para Inter-cambio de Gráficos desa-rrollado por Compuserve.Usa el algortimo LZW paracomprimir los datos.

JPEGEstándar de compresiónde imagen que permiteusar distintos tipos y ni-veles de compresión delos datos. El término seemplea también para de-nominar a los archivosgráficos creados usandoeste formato.

ResoluciónTérmino usado para indi-car la cantidad de puntosque componen una ima-gen. Se empleanormal-mente como principal in-dicador de la calidad deéstas o de los dispositivosrelacionados con ellas.

GIF animadoHay dos versiones del for-mato GIF, la 87a y la 89a.La segunda permitetransparentar uno de loscolores y adquirir el delfondo de la ventana o pá-gina situada debajo, ycrear GIFs animados. És-tos son secuencias for-madas por varias imáge-nes guradadas en unúnico fichero GIF y quedan sensación de movi-miento al mostrarse unasdetrás de otras.

URLUniform Resource Locator,o Localizador Uniforme deRecursos. Ruta completapara localizar un archivoen la Red, su dirección deInternet. Su sintaxis es pri-mero el protocolo (http, ftp,etc.), luego el nombre dedominio y finalmente laruta del fichero en el orde-nador que lo aloja.

ScriptConjunto de instruccionespensado para que los eje-cute otro programa y noel procesador. Son muyusados en la creación depáginas web.

06

05

04

03

02

01


Nº 127 63

grosor de la línea creada con laetiqueta <hr>. Para eliminar lasombra de ésta se utiliza la ins-trucción noshade, literalmente “sinsombra” en inglés:

5 Repite de nuevo los pasos 5y 8 del apartado “Colocar y

organizar imágenes en la página”para de este modo poder ver elresultado de tu trabajo:

Seguro que te has fijado en quemuchas páginas web incluyenimágenes que cambian al pasar elcursor del ratón por encima. Se

trata de los “rollovers”, uno de losefectos más vistosos que se pue-den incluir en un documentoHTML sin necesidad de “saberprogramar”o de recurrir a scripts

elaborados por otros.

1Vas a ver lo fácil que resulta.Para probarlo, puedes modifi-

car la etiqueta de una imagen queya hayas insertado anteriormen-te, por ejemplo

2 A continuación añade la si-guiente instrucción:

Justo detrás de onMouseOver es-pecificas la imagen que quieresque se muestre al pasar el ratónpor encima.

3 Añade el siguiente código .para indicar la imagen “en re-

poso”por medio del modificadoronMouseOut, de modo que la líneaquede de esta forma:

4 Para terminar, repite por úl-timo los pasos 5 y 8 del apar-

tado “Colocar y organizar imáge-nes en la página” y compruebacómo cambia la imagen:

En la próxima entrega del cursote enseñaremos a añadir enlaces.

06

Hacer que las imágenes cambien

�


Nº 12876

Curso. Creación de páginas web en HTML, 3ª parte

T endrás que reconocerlo.La página ha mejoradoya muchísimo desde que

comenzó este curso. ¿Quie-res conseguir llamar toda-vía más la atención de tus vi-sitantes? Entonces añadealgunos hipervínculos ,también llamados vínculos,enlaces o links. Con ellospodrás tener cientos de pá-ginas en una sola. ¿Cómo? Sihaces click encima de unode ellos, se mostrará en laventana del navegador laweb a la que esté vinculado.

También se emplean paralas descargas de software,enlazando el correspon-diente archivo.Y si el nave-gador no es capaz de ello,éste “llama” a la aplicaciónadecuada para hacerlo.

En este artículo te ense-ñamos a colocar hipervín-culos en tu página web, y a

utilizar las llamadas casca-ding stylesheets , u ho-jas de estilo en cascada.

¿Qué es unahoja de estilo?

Es un formato añadido aun archivo de texto, HTML,etcétera,que contiene el es-quema maestro de diseñodel documento.Entre otros,se pueden aplicar estilos altipo, tamaño y color defuente, a la forma del texto(cursiva, negrita o subraya-do), ajustar el texto (alinea-do a la izquierda, a la dere-cha o centrado), modificarla separación de líneas o depalabras, la forma del cur-sor y el color del hipervín-culo, la imagen o el colordel fondo.A un usuario leserá posible definir una ho-ja de estilo para cartas per-sonales, otra para docu-mentos formales..., todas lasque sean necesarias.

02

01

En este apartado te mostra-mos cómo añadir un hiper-vínculo a una página webpor medio del lenguajeHTML. Para ello ahora vas aseguir ampliando el docu-mento de ejemplo que he-mos utilizado en las ante-riores entregas del curso.

1En dicha página web ha-blábamos de El Puerto

de Santa María. Parece natu-ral ofrecer a los visitantes

enlaces a otras páginas weby recursos sobre la ciudad.Para ello, abre primero lacarpeta en laque guardastetodos los archi-vos usados has-ta ahoraluego haz clickcon el botónderecho enci-ma de ,a continuación coloca elcursor sobre la entrada

llamda y pincha enla lista que se despliega en

2 Modifica de este modoel código fuente

del documento:Los hipervínculos suelenmostrarse en azul para des-tacarse sobre el fondo. Co-mo a veces el color de éstehace que no se vea claro elenlace, puedes modificarlopor medio de la instrucciónlink=navy Del mismo modo,alink=red tiene como efectoque el link, al hacer click enél, aparezca en rojo.Y cuan-do haces click sobre el hi-pervínculo, vlink=teal seocupa de que aparezca enverde oscuro indicando queya has pinchado en él. Laetiqueta <a> introduce elenlace en el documento. Ladirección se pone detrás dehref=. Antes de la etiqueta</a>, con la que se cierra lalínea, aparece el texto quese mostrará en la página,“encima” del hipervínculo.Finalmente, por medio de

<center> se mostará en lamitad de la ventana.

3 Aprieta , y, sin soltar-la, pulsa también la te-

cla G,para que así se guar-den todos los cambios en elfichero HTML.

4Compruebacómo han

quedado loscambios. Otravez en

03

Una de las cosas más “divertidas” de navegar por Internet es ir“saltando” de página en página. ¿Quieres que los visitantes dela tuya puedan hacerlo? Te enseñamos a usar los hipervínculos.

Añadir enlaces a un documento HTML

Añadir enlaces a un documento HTML 76Utilizar cascading stylesheets 78


128_76_78_PROG_HTML 21/8/03 13:08 Página 76

Nº 128 77

Trucos: Lo que seriese

HipervínculoEnlace predefinido quevincula dos objetos dis-tintos. Éstos pueden sertanto zonas de un mismodocumento como archi-vos completamente dis-tintos. En la actualidad, seasocia casi exclusiva-mente con aquella partede una página web queconduce a una página di-ferente si se pulsa enci-ma de él.

CascadingStylesheets

Aunque su traducciónmás exacta sería algo pa-recido a “diseños de pá-gina sucesivos en casca-da”, normalmente se usala expresión “hojas de es-tilo en cascada”, o direc-tamente las siglas CSS.Es un formato añadido aun documento HTML quepermite, tanto a usuarioscomo a administradoresde una página web, unmayor control acerca decómo se muestra la pági-na. Estos diseños es po-sible aplicarlos a cual-quier documento. Laexpresión “en cascada”procede de que sólo hayque especificar la hoja deestilo en el primer docu-mento HTML para que seaplique de forma sucesi-va en todas las páginasde la web, sin necesidadde escribir el código entodas ellas.

Código fuenteInstrucciones y expresio-nes de un programa tal ycomo fueron escritas porel programador en un len-guaje determinado.

URLUniform Resource Locator,o Localizador Uniforme deRecursos. Ruta completapara localizar un archivoen la Red, su dirección deInternet. Su sintaxis es,primero el protocolo (http,ftp, etc.), luego el nombrede dominio (.com, .org .es,etc.), y finalmente la rutadel fichero en el ordenadorque lo aloja.

04

03

02

01

�Curso: Creación de páginas web en HTML, 3ª parte

haz doble click encima depara que se abra

la web en una ventana delnavegador de Internet:En tu página ahora apare-cen tres hipervínculos:

5 El cursor tomará el aspecto de una mano

cuando lo lleves encima deun enlace:

Haz click una vez en el hi-pervínculo y mantén el bo-tón presionado. El textoaparece de color rojo:

Cuando sueltes,y si estás co-nectado a Internet, se abri-rá la página “vinculada”:

6 Para volver a tu páginapincha en Fíja-

te en que el enlace sobre elque has hecho click apareceen ahora en color verde:

7 Si quieres, puedes usarenlaces en vez de mos-

trar las imágenes en la pági-na. Para ello será necesarioque modifiques el códigoHTML del documento. Enlugar de una URL , intro-duce, sencillamente, la rutadel servidor (o del disco du-ro) donde se encuentra elarchivo gráfico que quieres

que se abra al pinchar enci-ma del vínculo. Para ponerun enlace “detrás” de lasimágenes, modifica ahora eltexto en el editor de la si-guiente manera:

8 Con la instrucción adi-cional border=0 evitarás

que la imagen se enmarquecon una línea. Si quieres in-sertar un marco, omite lainstrucción o bien modificala cifra que hay dentro delparéntesis. Cuanto mayorsea ésta, más grueso apare-cerá el marco. Por ejemplo,con el valor semostraría de esta forma:

9 Repite el paso 3para guardar los

cambios, y actualiza la imagen apretando en o presionando ¶.

Como puedes ver aquí ,

ahora el cursor adopta laforma de una mano cuandolo colocas encima de unade las imágenes.

10 Muchas de las pá-ginas web que po-

demos encontrar por Inter-net resultan “demasiadograndes” para que se pue-dan mostrar completas enla pantalla del ordenador.Normalmente es necesario

emplear la barra de despla-zamiento de la ventana pa-ra verla entera. Puedes em-plear un sencillo truco pa-ra que los visitantes de tuweb no tengan que hacer-lo. Basta con que añadas hi-pervínculos que remitan ala parte inferior del docu-mento, los llamados saltosde página. Modifica el códi-go HTML de la siguienteforma:

11Como ves, has elimi-nado las instruccio-

nes que organizaban lasimágenes en la ventana. Pormedio de name= “arriba” yde name= “abajo” se mues-tran los puntos de salto. Lasinstrucciones href= “#arri-ba” y href= “#abajo” son loslinks que remiten a ellos.Ahora repite el paso 3 paraque así se salven de estemodo todos los cambios.

04

128_76_78_PROG_HTML 21/8/03 13:08 Página 77

Nº 12878

Curso. Creación de páginas web en HTML, 3ª parte�

12Regresa al navega-dor y presiona la te-

cla ¶ para actualizar la pá-gina. Como ves, no es posi-ble ver la página entera:

13Puedes utilizar la ba-rra de desplazamien-

to de la derecha para moverla página hacia abajo. Peroes mucho más sencillo ha-

cer uso de los nue-vos hipervínculos.Cuando hagas clicken el hipervínculo

o encimade la web“salta” hacia arribay hacia abajo.

14También esposible ha-

cer que te envíenmensajes de co-

rreo electrónico sin que elvisitante tenga necesidad

de saber tu dirección email.Para ello modifica el códigode la siguienteforma:Naturalmente,tienes que susti-tuir la direcciónpor la tuya.

15Repite el paso 3 yluego pulsa la tecla

¶ . Si pinchas encima delnuevo enlace se ejecutará el cliente decorreo electrónico del visi-tante:

Utilizar Cascading Stylesheets

Hasta ahora, cuando hasquerido modificar el estilodel documento, tenías queañadir las nuevas instruc-ciones del formato en cadalínea afectada. Existe unaforma de evitarlo, las “hojasde estilo en cascada”o Cas-cading Stylesheets.:

1Primero, modifica el có-digo HTML de la si-

guiente forma:Puedes quitar todas las ins-trucciones font del docu-mento. Esto es algo que selogra mediante el uso deCascading Stylesheets.

2 El “formateado” se ini-cia con <style type =

“text/css”> p, h1, h3. Estosignifica que los estilos queaparecen a continuación seaplicarán al texto que estádentro de estas etiquetas.Todo lo que se encuentreentre <p> y </p>, <h1> y</h1>, y <h3> y </h3> debeaparecer en el color black,en el tamaño 10pt y en lafuente Arial. Los especifica-dos para los titulares sonnavy y green, en los tamaños20pt y 12pt. La letra Arial esla misma del primer estilo.

3 Aprieta en la tecla ,mantenla presionada y

pulsa ahora sobre la tecla G.Vuelve a la ventana del nave-gador y aprieta la tecla ¶para que se actualice. La pá-gina debe tener ahora más omenos un aspecto comoéste:

4 Si ahora haces click en-cima del hipervínculo

, podrás comprobarque el estilo de los enlaces si-tuados abajo no se han vistoafectados por el cambio.Estose debe a las instruccioneslink=navy y vlink=red, y tam-bién a que el hipervínculoestá situado entre las etique-tas <p> y </p>.

5 Con el modelo de “Cla-ses” es mucho más sen-

cillo. Modifica el código deesta forma:Y también de esta otra paraañadir una “despedida”:Por medio de la instrucción

.final has creado un nuevomodelo, una clase o class,que contiene estilos con losque será posible formatearuna parte del texto. Como,por ejemplo,con la línea <pclass=final >

6 Repite el paso 3 y lue-go pincha encima del

hipervínculo .La última línea ha adquiridoahora el estilo de la nuevaclase:Así puedes resaltar los textosde forma individual y aho-rrarte el tiempo que de otromodo pasarías escribiendoinstrucciones “extra”.En la próxima y última par-te de este curso de HTMLaprenderás, entre otras co-sas, cómo publicar tablas enuna página web y tambiéncómo usar marcos o “fra-mes”. Éstos te permitiránabrir y visualizar diferentespáginas web en una solaventana del navegador, quese “dividirá” para ello.

128_76_78_PROG_HTML 21/8/03 13:09 Página 78

Diseñar una tabla sencilla 98Organizar el contenidode una web con una tabla 99Usar marcos 99Caracteres universales 100

Nº 12998


Construir una págna web no es sólo ir añadiendo contenidos “sinton ni son”. Hay que hacerlo de forma organizada, cuidando quetodo esté en sus sitio. Las tablas y los marcos te serán de ayuda


C on sólo usar adecuada-mente algunos recursoste será muy fácil orde-

nadore el contenido de tuweb. Así, los visitantes seorientarán enseguida y po-drán encontrar fácilmentelo que buscan. Lo mejor pa-ra ello es que emplees tablasy marcos.En esta entrega delcurso, la última, te enseña-mos a hacerlo.

¿Para qué se usanlas tablas?

Te ayudarán a organizarlos contenidos.Una tabla es-tá formada por filas y co-lumnas. En la intersecciónde éstas hay campos inde-pendientes, llamados celdas,que, que pueden rellenarsede datos, colores y motivos

de fondo. Además, puedesutilizar una tabla para crearun sumario o índice para laweb completa.

¿Qué son los marcos?

Los marcos o “frames”soncada una de las “subventa-nas” en las que se puede di-vidir el navegador para mos-trar en cada una de ellas undocumento HTML diferen-te. De este modo puedes,por ejemplo, usar un marcopara el sumario, otro paralos hipervínculos y otro pa-ra los contenidos, ya pro-cedan de la misma web o deuna dirección de Internetdistinta.

Respecto a cuántos framesse deben usar, es una cues-tión de gusto.Aunque conmás de tres o cuatro la pá-gina queda poco clara.

En este apartado aprende-rás a organizar unaso cuna-tos datos medio de una sen-cilla tabla y posteriomentea incluirla en tu página web.

1Abre el Bloc de Notas deWindows. Para ello haz

click en el botón ,luegopincha encima de laentrada llamada A continuación introduce elcomando

y haz click sobre encima delbotón .

2Escribe las siguientes lí-neas en la ventana:

Con la etiqueta [table] se em-pieza la tabla. Cada línea seinicia por emdio de [tr] y secierra con [/tr]. Para las en-tradas de la primera línea, laque contiene las cabeceraso títulos de cada columna,seutilizan las instrucciones [th]y /[th],y para las distintas en-tradas de cada fila [td] y [/td].El color de fondo las celdasse modifica con las instruc-ciones [bqcolor="aqua”] y[bqcolor=”yellow”]. Por últi-mo, el comando [cellpad-ding=5] se emplea para defi-nir la distancia entre el textoy las líneas de la tabla.

3Guarda el nuevo docu-mento HTML en tu dis-

co duro.Para ello,pincha enel menú y, en la lis-ta que se despliega, sobre

Dirí-gete a la carpeta enla que estás copian-do todos los archi-vos a lo largo del curso introduce el nombre del fi-chero, ,y aprieta encima del botón

.A continuación cie-rra el programa pulsando

4Para abrir la pá-gina, abre

y haz doble clicksobre el icono Así el navegadormostrará la tabla

Diseñar una tabla sencilla


Nº 129 99

Curso: Creación de páginas web en HTML, 4ª parte�

Así colocas una tabla comoboceto o esquema sobreuna página. Para el ejemplosirve el archivo de la ante-rior parte del curso

1Aún debes tener abiertala ventana

del apartado anterior. Si noes así, ábrela y pulsa con elbotón derecho encima de luego coloca elcursos sobre

y hazclick en la listaque se despliega encima dela entrada

En este apartado te vamos aenseñar a conseguir quepuedan mostrarse varias pá-ginas en una sola ventanadel navegador.

1En primer lugar vas acrear una página que

servirá de sumario o de ín-dice de tu web. Si has cerra-do el editor de texto, repiteel paso 1 del apartado “Di-señar una tabla sencilla”.Haz click arriba en el menú

y a continuación sobre la entrada llamada

. Luego introduce elsiguiente texto:

Por medio de la expresión[target=”Contenidos”] esta-mos “anticipando aconteci-mientos” al especificar elnombre del marco en el quedebe abrirse el documentovinculado al enlace.

2Repite el paso 3 delapartado “Diseñar una

tabla sencilla” para guardarel nuevo documento. Daleel nombre de

3Ahora pulsa dos vecesencima del

iconoy se mostrarála página conen una ventanadel navegador:

Si haces click encima decualquiera de estos enlacesse abrirá una ventana dife-rente del navegador paramostrar las correspondien-tes páginas web.

4Gracias a los marcos es-to sucederá sin necesi-

dad de abrir nuevas venta-nas. Repite el paso 1 de este

tablece que la máxima an-chura de la tabla es de 950píxeles. La columna de la iz-quierda tendrá una anchu-ra de 160, expresado con[width=160]. Para la segundacolumna no se ha indicadoninguna anchura, lo que sig-nifica que su ancho estaráen función del de la prime-ra, o sea 950-160 = 790 pun-tos. [align=center] sirve parasituar la tabla en el centrode la ventana.Y la instruc-ción [valign=top] ajusta elcontenido de la celda haciaarriba.

4En cuanto a la línea,hemos empleado por

primera vez una “entidad”para representar caracteresno especificados en la nor-ma ASCII, en este caso unavocal acentuada. Encontrarásmás información acerca delas entidades en el recuadrosituado en la página 100.

5A continuación, aprietaa la vez las teclas y

G para que se guarden lasmodificaciones que has in-troducido en el documento.

6Ahora vuevea la carpeta

y pulsa dos ve-ces encima delicono .La página de In-ternet se presen-tará ahora pormedio de tablasordenadamente repartidasdentro de la ventana del na-vegador:

Organizar el contenido de una web por medio de una tabla

Usar marcos

2Modifica el código fuen-te HTML de la siguiente

forma:Reconocerás muchas ins-trucciones de las instruccio-nes por haberlas usado enel anterior apartado, pero al-gunas son nuevas. Por ejem-plo, hemos modificado elesquema de color de algu-nos elementos, como los en-laces, para que sigan siendovisibles de forma clara conel nuevo estilo de la página.

3Por medio de la instruc-ción [width=950] se es-


Nº 129100

Curso: Creación de páginas web en HTML, 4ª parte�

Para gustos...Para gustos...

Aquamarine 43b7baBeige f5f3d7

Bisque fde0bcBrown 980517

Chocolate c85a17Coral f76541

Cornsilk fff7d7Cyan 00ffff

DarkGoldenrod af7817DarkOrchid 7d1b7e

ForestGreen 4e9258Gold d4a017Gray 736f6e

IndianRed 5e2217Ivory ffffee

Khaki ada96elavender e3e4fa

Orchid e57dedPink faafbe

Plum b93b8fRoyalBlue 2b60de

Salmon f88158SandyBrown ee9a4d

SeaGreen 4e8975Sienna 8a4117

SkyBlue 6698ffSnow fff9fa

Tomato f75431Turquoise 43c6db

YellowGreen 52d017

Caracteres universalesCaracteres universales

¿No has encontrado algunavez alguna web en la que elnavegador “se hace un lío”?Para evitarlo se ha definidounos códigos y unos nombresllamados entidades, que re-presentan los caracteres espe-

ciales y permiten mostrarlos“tal cual” en cualquier docu-mento. Las entidades comien-zan con el símbolo ampersand[&] y terminan con un punto ycoma [;]. Aquí puedes ver al-gunas de las más importantes:

Caracter Código Entidad Caracter Código Entidad ! ! -- " " -- # # -- & & -- % % -- ( ( -- ' ' -- * * -- ) ) -- , , -- + + -- . . -- - - -- : : -- / / -- _ ¹ sup1 ; ; -- ¿ ¿ iquest = = -- Á Á Aacute ? ? -- Ç Ç Ccedil [ [ -- É É Eacute ] ] -- Í Í Iacute { { -- Ó Ó Oacute } } -- á á aacute

nbsp ç ç ccedil _ ² sup2 é é eacute _ ¼ frac14 í í iacute Ú Ú Uacute ñ ñ ntilde ú ú uacute ó ó oacute ü ü uuml ÷ ÷ divide

mismo apartado y escribe losiguiente:

5 La instrucción [frame-set] “informa” al navega-

dor de que debe dividir laventana en varias partes. Laforma apropiada de hacerlose le indica por medio de[cols=”150,*”], que quieredecir que la ventana de laaplicación se debe partirseen dos columnas verticales,la primera con una anchurade 150 puntos. El asteriscoindica que se debe reservarel resto para la segunda co-lumna. El comando [bor-der=0] impide que se dibujeuna línea entre los dos mar-cos. Con las dos líneas si-guientes se rellenan las cel-das. La primera incluye el ín-

dice, y la segunda la “páginaprincipal”. Con las instruc-ciones [name=”Lista”] yde [name=”Contenidos”] se“bautizan” ambos marcos,de modo que se pueda usarsus nombres para que loshipervínculos sepan con lacolumna en que debenabrirse los documentos.

6Repite el paso 3 delapartado “Diseñar una

tabla sencilla” y nombra alfichero como .

7A continuaciónpincha dos ve-

ces encima de

para ver el resultado:

Si ahora haces click

la tabla se mostrará en laparte derecha:

8 Las ventanas se puedensubdividir de nuevo,

una columna se puede divi-

definen los enlaces: .A continuación, guarda to-dos los cambios y cierra elBloc de Notas pinchandoencima de .

13Haz click dos vecessobre

el icono Se iniciará eln a v e g a d o r,que en la par-te superior mostrará los tres

nuevos vínculos

14Si haces click encualquiera de ellos

aparecerá la página de In-ternet en la misma ventana:Esto es todo. Dándote a co-nocer los fundamentos delHTML, te hemos mostradola puerta para la programa-ción de páginas web.Ahoraeres tú el que debes cru-zarla. Por que ahora puedeshacerlo.

dir en filas horizontales. Mo-difica de esta forma el códi-go fuente:El segundo marco, por me-dio de la línea [rows=”50,*”],se “parte” en dos filas hori-zontales.La primera tiene 50puntos de ancho, el resto sereserva para la segunda fila.

9Aprieta la tecla yambién la G para guar-

dar todos los cambios.

10 Sólo falta ahora elarchivo que debe

aparecer en la primera filade la segunda columna. Re-pite el paso 1 e introduce losiguiente:Con la instrucción [ ]se introduce un espacio enblanco entre los distintosenlaces, que se mostraránen la misma línea.

11Repite de nuevo elpaso 3 y guarda el

archivo con el nombre

12Como hemos situa-do los tres hipervín-

culos en una columna extra,ahora podemos eliminarlosde la página principal. Paraello borra en las tres filas en las que se


Curso:Creación de páginas web en HTML,1ª parte · 72 Nº 126 Curso:Creación de páginas web en...

Documents

Transcript of Curso:Creación de páginas web en HTML,1ª parte · 72 Nº 126 Curso:Creación de páginas web en...