y  

 y  

,también puedes utilizar
. El resultado sería una lista numerada:

Existe una forma más 5 sencilla de lograr que el Pincha detrás de Con HTML también texto se muestre de manera 9 o –en función del 13 puedes configurar el “ordenada”en la pantalla.Las que hayas decidido usar– y  tipo y el color de la fuente.

 

etiquetas 

 y  

se ocu- presiona C.Introduce

---

 Vuelve a modificar el códipan de que los textos más  y presiona de nuevo C . go fuente del documento de largos se dividan automátiesta forma: camente en párrafos.Así que Cuando ahora repiborra todas las instrucciones tas el paso 6  ver ás e introduce al comienque con ello aparecerá una
zo y al final de cada frase di- fina línea debajo del titular: chas instrucciones.

10

Presiona la tecla  y, 6 sin soltarla, pulsa en la letra para guardar así los ¡

g

cambios.A continuación ve a la ventana del navegador   y aprieta en el icono o sobre la tecla 5 para actualizar la página. Observa como ahora el texto se divide “él solito”, de forma clara, en distintos párrafos. La longitud de las líneas quedará fijada por el ancho de la ventana:

 Vas a seguir proban11 do distintos tipos de formato.Así que modifica el

texto de esta forma: Por medio de la etiqueta
introduces lo que se denomina una lista. Cada uno de los elementos independientes de esta lista Por medio de 14 se modifica la fuente del texto

has utilizado la orden .Para especificar el color puedes utilizar un situado a continuación, y  “alias”, como en este ejemhasta la etiqueta . Si plo,o su código hexadecimal. olvidas añadir esta última, En este caso, la instrucción la edición afectará a todas sería   las líneas hasta el final del Puedes ver algunos de ellos

Éstas no son,ni mucho 7 menos,todas las posibilidades que tienes para

editar textos.Por ejemplo, con  

 y  

puedes resaltar titulares. Pruébalo. Sustituye los tags

 y 

(antes y después de la línea de bienvenida) por 

 y  

. Repite el paso 6 para de este modo guardar todos los cambios se marcan por medio de la que has realizado y actua- instrucción
• , y ésta se lizar la página: cierra con
.

documento. Con las instrucciones , , e puedes hacer que los textos se muestren en negrita y en cursiva . modificar tam15Para bién el color del texto

74 

Nº 126

en el recuadro situado en la siguiente página. Repite el paso pa16 ra guardar el archivo  y actualizarlo.Tu página aho6

ra debe tener más o menos este aspecto:

 Y para terminar,pue17 des incluir un “último retoque”,añadiendo una

gran letra mayúscula al principio del párrafo, lo que se denomina una letra capitular.Para ello debes modificar  el código de esta forma:  Asegúrate de incluir la letra que quieres “engordar” entre las dos etiquetas.

Repite de nuevo el pa18 so  y obser va el resultado:  6

¡Enhorabuena! ¡Ya has creado tu primera página web!

En la siguiente entrega del curso te enseñaremos,entre otras cosas,cómo puedes insertar archivos de imágenes en un documento HTML.

El color en la web 

aqua   black blue   fuchsia gray green lime   maroon   navy olive   purple   red teal   silver   white   yellow

Los “alias” suelen ser, simplemente, el nombre del color en inglés. Si no conoces alguno, puedes intentar traducirlo. Por ejemplo, si no conoces el alias o el código del naranja, prueba con “orange” (por cierto, en este caso habrás acertado). Respecto al valor hexadecimal, es posible emplear un programa de retoque fotográfico, como Photoshop o Paint Shop Pro. Su paleta de colores te mostrará el código hexadecimal de cualquier matiz que quieras emplear:

Nº 126

#00ffff #000000 #0000ff #ff00ff #808080 #008000 #00ff00 #800000 #000080 #808000 #800080 #ff0000 #008080 #c0c0c0 #ffffff #ffff00

� 75 

Curso HTML, 2ª parte  cuidado.Asegúrate antes de que se trata de imágenes gratuitas,de las que puedes disponer libremente, o pídele autorización al “propietario intelectual” antes de publicarlas.

16,7 millones de colores distintos, mientras que GIF sólo consigue 256 colores.Además,a diferencia del anterior  no permite utilizar distintos niveles de compresión. Por  eso JPEG es el más usado para fotos y en general imágenes que requieren cierta ca¿Pueden estar  lidad.GIF tiene también sus en cualquier  ventajas,ya que permite creformato de imagen?  ar imágenes en movimiento No.La imagen debe estar   y usar fondos transparentes. en formato GIF 01 (pág. 62) Para ambos casos es válio JPEG 02 (pág. 62) . Es l a do un último consejo. Inúnica forma de asegurarte de tenta buscar el equilibrio que se muestre correcta- entre tamaño y calidad de mente con cualquier nave- la imagen. Ésta se resentirá gador. Se trata de formatos si reduces demasiado la reque permiten almacenar la solución 03 (pág. 62) para imagen de forma comprimi- ahorrar espacio. da,es decir,archivos que no requieren usar mucha me- ¿Cómo lograr  moria. La ventaja de esto es muy clara.Se pueden trans- imágenes en  ferir más cómodamente a movimiento?  través de Internet,y ocupan Te será posible tanto desmucho menos espacio en el cargar los GIF animados 04 (pág. 62) de forma gratuiservidor web en el que esté alojada la página. JPEG se ta desde Internet como crepueden representar hasta arlos tú mismo.

Colocar y organizar las imágenes en la página En este apartado te vamos a enseñar cómo se insertan imágenes en una página  web, y también cómo organizarlas.Para ello seguiremos usando la página dedicada a El Puerto de Santa María,que  ya creamos en la anterior entrega del curso.  Antes de empezar a tra1 bajar en el documento HTML,asegúrate de disponer 

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

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

60 

nadie le gusta ver pági- ¿Qué imágenes  nas web en las que sólo haya texto.Ya no esta-  puedo utilizar?  mos en la “prehistoria” de En principio, cualquiera. Internet, ahora prima todo Desde fotos que has hecho lo “multimedia”, y cuanto con una cámara de carrete más,mejor. Por suerte, es  y que has digitalizado co n muy sencillo añadir fotos y  ayuda de un escáner a las todo tipo de elementos grá- que hayas descargado en tu ficos a un documento HTML disco duro desde tu cáma y de este modo darle un as- ra digital o desde Internet. pecto mucho más atractivo. En este último caso, ten

 A  60 62 63 64

Nº 127

cho del ratón y pincha en el menú que se despliega sobre .Selecciona para almacenar los archivos de imagen la misma carpeta donde guardaste el documento HTML en el que estás trabajando,es decir, .

Dale un nombre,por ejemplo , y cierra la ventana apretando en . Repite el proceso –evidentemente, dando a los ficheros un nombre diferente– con todas las fotos que pretendas emplear.

de las imágenes que vas a usar.Si se trata de tus propias fotos,esto no supondrá ningún problema,tan sólo asegúrate de que no “pesan”demasiado para colgarlas en Internet.Si no, hay muchas  webs en las que encontrarás  Ahora ya puedes seguir  imágenes que puedes descon la construcción de cargar de forma gratuita y  la página.Abre la carpeta usar en tu propia página.La siguiente URL 05 (pág. 62)

3

http://spain.linkworld.ws/Web masters/Recursos/Galerias_de_ Imagenes/ contiene enlaces a

muchas de ellas.

Para bajarlos, una vez 2 cargada la imagen en el navegador,haz click encima de ella con el botón dere-

 y haz click con el botón derecho encima de .

 A continuación sitúa el cursor encima de la entrada llamada y, en la lista

Curso HTML, 2ª parte 

cilla. Detrás de las instrucciones introducidas en el paso 7 añade ahora hspa ce=7 , de manera que queden así: Repite los pasos 5 y  8 para comprobar el resultado:

que se despliega,pincha sobre el icono del Bloc de Notas de Windows:

 Aho ra mod ifi ca el có4 digo fuente de la siguiente forma:  Vamos a dar un “repaso”a las etiquetas, aunque ya las conozcas de la anterior entrega del curso. Con se especifica el comienzo del documento,que finaliza con . Las instrucciones , ,  comprenden la cabecera y el título de la página.

,  

,  

 y 

se utilizan para crear  titulares de distinto tamaño. Entre los “tags”    y  se encuentra el texto que luego se leerá en la página.  

 y  

se encargan de los saltos del texto.Lo único nuevo son las líneas resaltadas en color  amarillo. Con se carga la primera foto en la página.
duro o en el servidor. Las otras imágenes se añaden con las instrucciones  Apriet a la tecla , 5 manténla presionada y  pulsa la tecla . Con ello G

guardarás todos los cambios realizados ahora en el código fuente.

6

Comprueba el resultado con un doble click  encima del icono

para que así el navegador  muestre tu página: Para que el texto reco7 rra las imágenes,en vez de dejar espacios en blan-

co a su lado, escribe la instrucción align=left justo detrás de “imagen1.jpg” e “imagen3.jpg” de modo que la etiqueta quede de este modo: Detrás de “imagen2.jpg” escribe align=right.

número.En caso de que ha ya texto debajo o por encima de una imagen, puedes utilizar la instrucción vspa ce,indicando del mismo modo que antes el espacio que quieres dejar.

Por medio de la cifra También se puede introducida detrás especificar el tama10 11 de puedes determiño de la imagen. Para ello  hspace nar la distancia respecto a la imagen, que será mayor  cuanto más elevado sea el

modifica el texto como sigue: Por medio de height=150

Graba a continuación las modificaciones co8 mo hemos descrito en el paso  5 . Para hacerlas visibles en la página,debes actualizarla. Para ello haz click una vez en el icono , o bien aprieta la tecla ¶ : Desgraciadamente,si lo 9 haces de este modo el texto queda demasiado pegado a la foto.La buena noticia es que esto se puede cambiar de forma muy sendeterminas la altura de la imagen. El navegador calcula automáticamente la anchura manteniendo las proporciones. Si especificas el ancho,la altura es la que se calcula de forma automática. Para el ancho se emplea la instrucción width. Naturalmente, también es posible determinar ambos valores, pero con ello puede ocurrir que la imagen aparezca distorsionada:

� Nº 127

61

Curso HTML, 2ª parte 

01 GIF Graphics Interchange Format,o Formato para Intercambio de Gráficos desarrollado por Compuserve. Usa el algortimo LZW para comprimir los datos. 02 JPEG Estándar de compresión de imagen que permite usar distintos tipos y niveles de compresión de los datos.El término se emplea también para denominar a los archivos gráficos creados usando este formato.

Resolución Término usado para indicar la cantidad de puntos que componen una imagen.Se empleanormalmente como principal indicador de la calidad de éstas o de los dispositivos relacionados con ellas. 03

GIF animado Hay dos versiones del formato GIF, la 87a y la 89a. La segunda permite transparentar uno de los colores y adquirir el del fondo de la ventana o página situada debajo, y crear GIFs animados. Éstos son secuencias formadas por varias imágenes guradadas en un único fichero GIF y que dan sensación de movimiento al mostrarse unas detrás de otras.

Repite los pasos  y  12 para comprobar el resultado: 5

anteriores. Pero no vamos usarlo en nuestro ejemplo. En su lugar, insertaremos nuestra propia animación,que hemos creado en el truco de la página 64.

8

Las imágenes ani13 madas se insertan exactamente de la misma forma. El “movimiento”es una característica del archivo, no hay que insertar  código HTML. Puedes descargar un GIF animado desde Internet. Encontrarás muchos gratuitos en la dirección www.gifmania.com Carga la página y se14 lecciona, por ejemplo,la sección . Luego pincha en para  ver las imágenes disponibles:

 A continuación 16 modifica el código fuente de la siguiente forma: Una imagen móvil se in-

serta en la página de la misma forma que una imagen “normal”. La instrucción align=left se ocupa de que la imagen aparezca a la izquierda,al lado del titular.Y  también puedes ajustar su tamaño para que “encaje” tal y  como tú quieras.  Vuelve a repet ir los 17 pasos  y  para ver  cómo ha quedado:  5  8

Pulsa encima de una de ellas con el 15 botón derecho y haz click  en . Dale el nombre que quieras  y guarda el fichero en la misma carpeta que los

04

05 URL Uniform Resource Locator, o Localizador Uniforme de Recursos.Ruta completa para localizar un archivo en la Red,su dirección de Internet.Su sintaxis es primero el protocolo (http,ftp, etc.),luego el nombre de dominio y finalmente la ruta del fichero en el ordenador que lo aloja. 06 Script Conjunto de instrucciones pensado para que los ejecute otro programa y no el procesador. Son muy usados en la creación de páginas web.

Modificar el fondo de una página  En este apartado te enseñamos a añadir un fondo a tu página web.

1

terior y comprueba qué tal ha quedado: Como ves,la imagen ocupa por completo el fondo de la

Primero hay que procurarse una imagen.De nuevo se te presentan varias alternativas a la hora de conseguirla. Es posible recurrir a Internet y descargarla de alguna de las direcciones que te hemos proporcionado,o bien puedes crearla tú mismo tal y  como te mostramos en la página 66. Una vez la tengas,guárdala en la carpeta

 Vuelve a la ventana del 2 Bloc de Notas y añade las siguientes instrucciones: Como ves, se consigue que el navegador reconozca la imagen como un fondo de página por medio de background.A su derecha se indica el nombre de la imagen, en este ejemplo así: =“fondo.jpg” . re pite los paso s  y  del apartado an3 Ahora 5  8

62 

Nº 127

página,quedando el texto y  las imágenes por delante. Si no se ven bien las le4 tras debido al color del fondo empleado, recuerda que puedes modificar tan-

to éste como el tamaño y tipo de la fuente usada. También es posible hacer que algunas partes se vean subrayadas mediante las etiquetas   y  .Por medio de size se determina el

grosor de la línea creada con la etiqueta  

---

. Para eliminar la sombra de ésta se utiliza la instrucción noshade, literalmente “sin sombra”en inglés:

Repite de nuevo los pasos  y  del apartado “Colocar y  5 organizar imágenes en la página” 5

 8

para de este modo poder ver el resultado de tu trabajo:

Hacer que las imágenes cambien  Seguro que te has fijado en que muchas páginas web incluyen imágenes que cambian al pasar el cursor del ratón por encima. Se trata de los “rollovers”,uno de los efectos más vistosos que se pueden incluir en un documento HTML sin necesidad d e “saber  programar”o de recurrir a scripts 06 elaborados por otros.

 Justo det rás de onMouseOver especificas la imagen que quieres que se muestre al pasar el ratón por encima.

 Añade el siguiente código . para indicar la imagen “en re3 poso”por medio del modificador  onMouseOut , de modo que la línea

quede de esta forma:

 Vas a ver lo fácil qu e res ulta. Para terminar, repite por úlPara probarlo,puedes modifitimo los pasos  y  del apar1 4 car la etiqueta de una imagen que tado “Colocar y organizar imáge5  8

 ya h ayas insertado anteriorm ente, por ejemplo

nes en la página” y comprueba cómo cambia la imagen:

c ontin ua ció n a ñade la siinstrucción: 2 Aguiente

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

� Nº 127

63 

Curso. Creación de páginas web

en HTML, 3ª parte 

llamda y pincha en la lista que se despliega en

Modifica de este modo el código fuente 2 del documento: 03

 Añadir enlaces a un documento HTML Utilizar cascading stylesheets

76 78

T

endrás que reconocerlo. La página ha mejorado  ya muchísimo desde que comenzó este curso.¿Quieres conseguir llamar toda vía más la atención de tus visitantes? Entonces añade algunos hipervínculos 01 , también llamados vínculos, enlaces o links. Con ellos podrás tener cientos de páginas en una sola.¿Cómo? Si haces click encima de uno de ellos, se mostrará en la  ven tana del navegador la  web a la que esté vinculado. También se emplean para las descargas de software, enlazando el correspondiente archivo.Y si el navegador no es capaz de ello, éste “llama” a la aplicación adecuada para hacerlo. En este artículo te enseñamos a colocar hipervínculos en tu página web,y a

Principios y estructura básica de HTML Imágenes y gráficos animados Enlaces y hojas de estilo Tablas y marcos 76 

Una de las cosas más “divertidas” de navegar por Internet es ir  “saltando” de página en página. ¿Quieres que los vi sitantes de  la tuya puedan hacerlo? Te enseñamo s a usar los hipervínculos. utilizar las llamadas cascading stylesheets 02 , u ho jas de estilo en cascada.

Añadir enlaces a un documento HTML 

¿Qué es una  hoja de estilo?  Es un formato añadido a un archivo de texto, HTML, etcétera, que contiene el esquema maestro de diseño del documento.Entre otros, se pueden aplicar estilos al tipo, tamaño y color de fuente,a la forma del texto (cursiva,negrita o subrayado),ajustar el texto (alineado a la izquierda,a la derecha o centrado), modificar  la separación de líneas o de palabras, la forma del cursor y el color del hipervínculo, la imagen o el color  En este apartado te mostradel fondo.A un usuario le mos cómo añadir un hiperserá posible definir una ho-  vín cul o a una p ágina web  ja de es tilo para cartas per- por medio del lenguaje sonales, otra para docu- HTML.Para ello ahora vas a mentos formales...,todas las seguir ampliando el docuque sean necesarias. mento de ejemplo que hemos utilizado en las anteriores entregas del curso. Nº 126 Nº 127 Nº 128 Nº 129

1

En dicha página web hablábamos de El Puerto de Santa María. Parece natural ofrecer a los visitantes Nº 128

enlaces a otras páginas web  y recursos sobre la ciudad. Para ello, abre primero la carpeta en la que guardaste todos los archi vos usados hasta ahora luego haz click  con el botón derecho encima de , a continuación coloca el cursor sobre la entrada

Los hipervínculos suelen mostrarse en azul para destacarse sobre el fondo. Como a veces el color de éste hace que no se vea claro el enlace, puedes modificarlo por medio de la instrucción link=navy Del mismo modo, alink=red tiene como efecto que el link, al hacer click en él, aparezca en rojo.Y cuando haces click sobre el hipervínculo, vlink=teal se ocupa de que aparezca en  verde oscuro indicando que  ya ha s pinch ad o en él . La etiqueta introduce el enlace en el documento. La dirección se pone detrás de href=.Antes de la etiqueta , con la que se cierra la línea, aparece el texto que se mostrará en la página, “encima” del hipervínculo. Finalmente, por medio de

se mostará en la

mitad de la ventana.  Aprieta , y, sin soltarla, pulsa también la te3 cla ,para que así se guarG

den todos los cambios en el fichero HTML. Comprueba cómo han 4 quedado los cambios. Otra  vez en

Curso: Creación de páginas web Trucos: en HTML, Lo que 3ª parte  seriese 

Como puedes ver aquí ,

emplear la barra de desplazamiento de la ventana para verla entera. Puedes emplear un sencillo truco para que los visitantes de tu  web no tengan que hace rlo. Basta con que añadas hipervínculos que remitan a la parte inferior del documento, los llamados saltos de página. Modifica el código HTML de la siguiente forma:

haz doble click encima de para que se abra la web en una ventana del navegador de Internet: En tu página ahora aparecen tres hipervínculos:

un enlace:

Haz click una vez en el hipervínculo y mantén el botón presionado. El texto aparece de color rojo:

Cuando sueltes,y si estás conectado a Internet, se abrirá la página “vinculada”:

que has hecho click aparece en ahora en color verde:

Si quieres, puedes usar  enlaces en vez de mos7 trar las imágenes en la página. Para ello será necesario que modifiques el código HTML del documento. En lugar de una URL 04 , introduce, sencillamente, la ruta del servidor (o del disco duro) donde se encuentra el archivo gráfico que quieres

Cascading Stylesheets  Aunque su traducción más exacta sería algo parecido a “diseños de página sucesivos en cascada”,normalmente se usa la expresión “hojas de estilo en cascada”,o directamente las siglas CSS. Es un formato añadido a un documento HTML que permite, tanto a usuarios como a administradores de una página web,un mayor control acerca de cómo se muestra la página. Estos diseños es posible aplicarlos a cualquier documento. La expresión “en cascada” procede de que sólo hay que especificar la hoja de estilo en el primer documento HTML para que se aplique de forma sucesiva en todas las páginas de la web,sin necesidad de escribir el código en todas ellas. 02

El cursor tomará el aspecto de una mano 5 cuando lo lleves encima de

Para volver a tu página 6 pincha en Fíjate en que el enlace sobre el

01 Hipervínculo Enlace predefinido que vincula dos objetos distintos.Éstos pueden ser tanto zonas de un mismo documento como archivos completamente distintos. En la actualidad,se asocia casi exclusivamente con aquella parte de una página web que conduce a una página diferente si se pulsa encima de él.

que se abra al pinchar encima del vínculo. Para poner  un enlace “detrás” de las imágenes,modifica ahora el texto en el editor de la siguiente manera: Con la instrucción adicional evitarás 8 que la imagen se enmarque border=0

con una línea. Si quieres insertar un marco, omite la instrucción o bien modifica la cifra que hay dentro del paréntesis. Cuanto mayor  sea ésta, más grueso aparecerá el marco. Por ejemplo, con el valor se mostraría de esta forma:

ahora el cursor adopta la forma de una mano cuando lo colocas encima de una de las imágenes. Muchas de las pá10 ginas web que podemos encontrar por Internet resultan “demasiado grandes” para que se puedan mostrar completas en la pantalla del ordenador. Normalmente es necesario

Repite el paso para guardar los 9 cambios, y actualiza

3

Como ves, has elimi11 nado las instrucciones que organizaban las imágenes en la ventana. Por  medio de name= “arriba”  y  de name= “abajo” se muestran los puntos de salto. Las instrucciones href= “#arriba” y  href= “#abajo” son los links que remiten a ellos.  Ahora repite el paso 3 para que así se salven de este modo todos los cambios.

03 Código fuente Instrucciones y expresiones de un programa tal y como fueron escritas por el programador en un lenguaje determinado. 04 URL Uniform Resource Locator, o Localizador Uniforme de Recursos.Ruta completa para localizar un archivo en la Red,su dirección de Internet.Su sintaxis es, primero el protocolo (http, ftp,etc.), luego el nombre de dominio (.com,.org .es, etc.),y finalmente la ruta del fichero en el ordenador que lo aloja.

la imagen apretando en o presionando ¶. Nº 128

77 

�

Curso. Creación de páginas web en HTML, 3ª parte  cer uso de los nue vos hipervínculos. Cuando hagas click  en el hipervínculo o encima de la web “salta” hacia arriba  y hacia abajo.

14

Regresa al navegaPuedes utilizar la ba12 dor y presiona la te- 13 rra de desplazamiencla para actualizar la pá- to de la derecha para mover  ¶

gina. Como ves, no es posible ver la página entera:

También es posible hacer que te envíen mensajes de correo electrónico sin que el  vis ita nte tenga nec esida d

de saber tu dirección email. Para ello modifica el código de la siguiente forma: Naturalmente, tienes que sustituir la dirección por la tuya.

Repite el paso  y  15 luego pulsa la tecla . Si pinchas encima del 3

¶

nuevo enlace se ejecutará el cliente de correo electrónico del visitante:

la página hacia abajo. Pero es mucho más sencillo ha-

Utilizar Cascading Stylesheets  Hasta ahora, cuando has querido modificar el estilo del documento,tenías que añadir las nuevas instrucciones del formato en cada línea afectada. Existe una forma de evitarlo, las “hojas de estilo en cascada”o Cascading Stylesheets.: Primero, modifica el có1 digo HTML de la siguiente forma:

haces click en4 Sicimaahora del hipervínculo podrás comprobar 

, que el estilo de los enlaces situados abajo no se han visto Con el modelo de “Claafectados por el cambio.Esto ses” es mucho más sense debe a las instrucciones cillo. Modifica el código de link=navy  y   vlink=red, y tam- esta forma: bién a que el hipervínculo  Y también de esta otra para está situado entre las etique- añadir una “despedida”: tas 

 y  

. Por medio de la instrucción

5

Puedes quitar todas las instrucciones font del documento. Esto es algo que se logra mediante el uso de Cascading Stylesheets.

has creado un nuevo modelo, una clase o class, que contiene estilos con los que será posible formatear  una parte del texto.Como, por ejemplo,con la línea


se ini2 Elcia“formateado” con . Esto