Unidad 1. Mi primera pgina web (I) 1.1.

Introduccin
El lenguaje que se utiliza para crear una pgina web es el HTML, Hyper Text Markup Lenguage (Lenguaje de Marcas de Hypertexto) Hay muchos cursos de HTML pero creemos que este es diferente porque pretende ser un curso integral de creacin de pginas web. Vamos a explicar brevemente que queremos decir con esto. Lo fundamental para escribir pginas web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu pgina necesitars saber un poco sobre grficos web, para recortar la imagen al tamao adecuado, si quieres poner un men desplegable es conveniente que conozcas algo sobre JavaScript, si quieres recoger datos de los usuarios mediante un formulario es conveniente hacerlo con un lenguaje tipo PHP. Tambin es conveniente utilizar un editor web para facilitar la escritura de pginas web, como KompoZer, para que tu pgina sea agradable es conveniente saber algo sobre diseo web, y por ltimo para que todo el mundo mundial vea tu trabajo necesitars subir tu pgina a un servidor de Internet y darla a conocer. Pues bien, todo esto y un poco ms es lo que hay en este curso. Adems hemos intentado explicarlo de forma que lo pueda entender cualquier persona sin conocimientos previos sobre todos estos temas. Dicho as, parece una misin casi imposible, esperamos que sigas todo el curso y llegues al final cumpliendo estas expectativas. Es un reto complicado pero esperamos crear un curso que sea un punto de partida a este apasionante mundo de la comunicacin global a travs de Internet y te dote de la visin general que te permita avanzar hasta lograr crear pginas web atractivas y completas. A final del curso estamos seguros que logrars crear conocimiento y ponerlo a disposicin de las personas, y algo del espritu de colaboracin y gratuidad desde el que est hecho este curso quizs llegue a contagiarte un poco. Se acaba dando parte de lo que se recibe. Por supuesto, tratar todos estos temas en profundidad exigira un curso de un tamao enorme, pero el objetivo es dar una introduccin a cada tema, de forma que el alumno se pueda desenvolver en las tareas bsicas y tenga las nociones suficientes para poder ampliar lo que ms le interese en otros sitios. Por esto, al final de los ltimos temas hemos puesto unas cuantas direcciones con lo mejor de la red en ese tema.

1.2. Contenidos
Para que sea ms fcil de entender hemos desarrollado el temario de forma progresiva mediante la creacin de un sitio web sobre flores, introduciendo cada concepto segn se va necesitando. As, primero (tema 2,3) veremos los conceptos bsicos de HTML, escribir texto, darle formato, hiperenlaces, estilos, etc. Luego (tema 5) explicaremos brevemente el editor KompoZer, luego veremos cmo estructurar una pgina web y un sitio web (tema 6), ms adelante introduciremos el programa Gimp para trabajar con grficos (tema 9), unas ideas para crear grficos vectoriales, como por ejemplo un logotipo para la pgina, con el programa Inkscape. En el siguiente tema (tema 10) introduciremos conceptos sobre JavaScript, y luego un poco de PHP (tema 11). En los temas finales, teorizaremos un poco sobre cmo publicar nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas. 1.3. Metodologa Como hemos dicho los diversos conceptos los introduciremos segn sean necesarios a medida que vamos desarrollando un sitio web. Primero crearemos una pgina sencilla para introducir los elementos bsicos de HTML, luego iremos aadiendo elementos a esa pgina, como un men, grficos, formularios, etc. En algunos temas, sobre todo al principio, la explicacin ser un poco ms teora y general. Muchas veces, encontrars la opcin de probar el cdigo que se est explicando. Te animamos a que hagas cambios sobre esos ejemplos y los vuelvas a probar, para ver qu sucede. En otros temas, nos centraremos ms en trabajar sobre el sitio de ejemplo, realizando cambios concretos. Por eso, te sugerimos que vayas creando el mismo sitio, asegurndote de haber aplicado los cambios explicados en cada tema. Los temas estn explicados tambin en video tutoriales, a los que puedes acceder al principio de cada uno. Aunque en ellos no explicamos cosas nuevas, puede que te ayuden a entender algunos conceptos al verlos de forma ms visual.

Al final de cada tema encontrars unos ejercicios propuestos. Con ellos, irs creando otro sitio con lo visto en cada tema.

Unidad 1. Mi primera pgina web (II) 1.4. Alternativas

Crear pginas web es la forma bsica de comunicar en Internet, pero no la nica, ni la ms adecuada para todos los casos. Si te gusta la informtica y quieres tener tu propio sitio web como una aficin, o si quieres crear un sitio web para tu club de ftbol, tu pequea empresa o para dedicarte profesionalmente al mundo de Internet, este curso, probablemente, te interesar mucho. Si en cambio la tecnologa te espanta un poco y slo te interesa la parte ms literaria seguramente haya otras formas de publicar en Internet que te resulten ms adecuadas, como, por ejemplo, los blogs. Escribir contenidos en un blog es ms sencillo que crear una pgina web aunque menos flexible. En cualquier caso, puedes empezar a leer el curso, quizs te sorprenda lo sencillo que es crear una pgina web.

1.5. Servidores y direcciones URL

Cuando visitamos pginas web en realidad estamos accediendo a archivos en un servidor web. La direccin o URL tiene este formato: http://www.nombredominio.com/directorio/paginaweb.htm Donde http:// es el protocolo y www. Indica el sistema de pginas web. Habrs observado que no hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de aadirlo, no porque nos es necesario. nombredominio.com es el nombre del sitio. Al ir directamente ah, vamos a su pgina de inicio. La ltima parte indica el archivo del sitio que estamos viendo. En este caso, una pgina llamada paginaweb.htm que est en una carpeta llamada directorio. Podemos visitar una direccin desde un buscador o desde un enlace en otra pgina. Podemos teclear la direccin en la barra de direcciones del navegador o acceder desde nuestros favoritos. Internet est formada por un conjunto de servidores conectados. Un servidor es un ordenador conectado a la red de acceso a Internet que dispone de un programa que es capaz de recibir una URL y devolver una pgina web al que hizo la peticin. Podramos decir que Internet est formado por una gran cantidad de ordenadores que pueden intercambiar informacin entre ellos. Es una gran red mundial de ordenadores. Los ordenadores se pueden comunicar porque estn unidos a travs de conexiones y gracias a que utilizan un lenguaje o protocolo comn, el TCP/IP.

Segn el esquema que podemos ver en la imagen, un usuario se conecta a la red (a travs de un mdem o un router, ya sea va lnea telefnica, cable, satlite, etc...). A partir de este momento el protocolo TCP/IP entra en juego, gracias a l puedes comunicarte con tu Proveedor de servicios de Internet (ISP) dndole a conocer tu direccin fsica.

Utilizando TCP/IP, el ISP asigna una direccin IP a tu PC y en ese momento se te da acceso a la red. Cuando queremos acceder a una pgina proporcionamos un dominio que es traducido en los Servidores DNS y localizado. Cuando sabemos en qu Servidor Web se encuentra la pgina que queremos visitar se procede a su descarga y visualizacin en el navegador del PC.

Unidad 1. Mi primera pgina web (III) 1.6. Qu es una pgina web?

Una pgina web es un documento de texto con marcas, llamadas etiquetas (tags en ingls). Cuando este documento se ve a travs de un navegador web, las etiquetas se interpretan y se visualiza el documento como una pgina web. Las etiquetas no se muestran pero determinan el aspecto de la pgina, y otras caractersticas, por ejemplo, si el texto es un enlace, en la etiqueta se indica la pgina a la que nos lleva el enlace. Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir una pgina web. Slo necesitamos conocer el lenguaje de las etiquetas o HTML.

Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello debers de tener dos ventanas abiertas, una con el curso y otra con el programa correspondiente.

Vamos a comenzar por escribir una pgina web muy sencilla. Para ello utilizaremos un editor de texto sin formato, como puede ser el Bloc de notas (Notepad) incluido en Windows. Puedes encontrarlo en Todos los programas Accesorios. El aspecto del Bloc de notas es muy simple, una hoja en blanco con una barra de mens. . Escribiremos el siguiente cdigo. Ms adelante ya veremos qu es cada elemento:

<html> <head> <title>Mi primera pgina</title> </head> <body> <p>Hola mundo</p> </body> </html> Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar que lo es la extensin de un archivo. La extensin indica de qu tipo es un archivo. La extensin son las tres letras que van despus del punto al final del nombre de un archivo (por ejemplo, imagen.gif o documento.doc). Puedes abrir cualquier carpeta para comprobarlo. Si no puedes ver las extensiones, es porque Windows las oculta. Si es tu caso, puedes hacer que las muestre a travs del men Organizar Opciones de carpeta y bsquedas, pestaa Ver, desmarcando la opcin Ocultar extensiones de archivo para tipos de archivos conocidos, en Windows Vista. En Windows XP encontramos esta opcin en el men Herramientas Opciones de carpeta, tambin en la pestaa Ver. Vamos a continuar guardando la pgina. Pulsamos en el men Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo Primera. Si ahora pulssemos Guardar, se guardara con la extensin txt, que indica que es

un documento de texto sin formato. Para guardarlo como una pgina web, debemos de emplear la extensin .htm (o .html). Por lo que completamos el nombre para que quede Primera.htm y pulsamos Guardar.

Nota: Es conveniente que guardes los archivos creados durante el curso en la misma carpeta. Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos guardado el archivo y hacemos doble clic sobre el. Como el archivo tiene extensin .htm, se abrir la pgina con el navegador que tengamos como predeterminado. Por ejemplo, en Internet Explorer 7, el resultado se ve as:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el documento del Bloc de notas, vers que todo lo que aparece entre los signos < y > no se muestra. Esos signos delimitan una etiqueta de HTML, y todas las que hemos utilizado siguen el formato <etiqueta>contenido</etiqueta>. Por ejemplo, la etiqueta <title> contiene el texto que se mostrar como ttulo de la pgina, y la etiqueta <p> indica un prrafo con texto normal. Por lo tanto, un navegador web es una aplicacin capaz de interpretar el cdigo HTML, formado por etiquetas y mostrarlo debidamente formateado. En cualquier momento, podemos ver el cdigo HTML de la pgina que estamos viendo. En Internet Explorer, podemos hacerlo desde el men Ver Cdigo fuente, y se mostrar utilizando el Bloc de notas. En Mozilla Firefox lo hacemos tambin desde el men Ver, eligiendo la opcin Mostrar el cdigo fuente de la pgina (teclas ctrl+ U), y muestra el cdigo fuente formateado con colores. Puedes probarlo viendo el cdigo fuente de esta pgina.

1.7. Un sitio web

Cuando tenemos varias pginas, podemos organizarlas en un sitio web. Un sitio no es ms que una carpeta que se encuentra en un equipo informtico, ya sea nuestro ordenador personal o un potente servidor. La primera carpeta es la carpeta raz. Por ejemplo, si accedemos a "www.aulaclic.es", estamos accediendo a la carpeta raz del sitio de aula Clic. Cuando escribimos "www.aulaclic.es" en el navegador, en realidad estamos accediendo a la pgina www.aulaclic.es/index.htm, es decir, al escribir una direccin que no acaba en .html (o en .html), el navegador lo interpreta como el nombre de una carpeta y busca en ella un archivo que se llame index.htm, si no lo encuentra devuelve el mensaje del tipo "No se puede encontrar la pgina web".

Tal como lo haramos con una carpeta de Windows, podemos organizar nuestro sitio con subcarpetas. Por ejemplo, una carpeta con todas las imgenes, otra con los vdeos, etc. Coloquialmente, es frecuente referirse a un sitio web slo como pgina web, por ejemplo "se ha actualizado la pgina web del ministerio", aunque no nos estemos refiriendo a una pgina en concreto. Veremos ms detenidamente qu es un sitio web cuando creemos los sitios para nuestras pginas, ms adelante.

Prueba evaluativa unidad 1: Mi primera pgina web Slo una respuesta es vlida por pregunta. 4

1. Una pgina web... a) Es un archivo que contiene texto, delimitado por marcas. b) Es un archivo, con datos slo entendibles por un ordenador. c) Es una imagen, una copia de una pgina fsica. 2. Las etiquetas HYML, se delimitan por los caracteres... a) [ y ] b) < y > c) { y } d) ^ y ^ 3. Para crear una pgina web utilizamos... a) Programas especficos para esta tarea, normalmente muy avanzados. b) Un procesador de texto, como Word u Openoffice c) Un programa que pueda editar texto sin formato. d) Cualquiera de los anteriores. 4. Un navegador web es... a) Una aplicacin que gestiona y clasifica las pginas web. b) Una pgina que nos permite buscar informacin en la web. c) Una aplicacin que interpreta el cdigo de una pgina y nos lo muestra formateado. d) Una aplicacin que nos permite crear y editar pginas web, desde su cdigo fuente. 5. Cules de estas extensiones de archivo corresponden a una pgina web? a) La extensin .css b) La extensin http o https. c) La extensin html. d) Cualquiera de las anteriores. 6. Un sitio web... a) Es un equipo que almacena las pginas web. b) Es la agrupacin de varias pginas relacionadas en un directorio comn. c) Es lo mismo que una pgina web.

Unidad 2. HTML bsico (I)

A continuacin vamos a ver los elementos bsicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura bsica de la pgina, a continuacin empezaremos a colocar cosas en la pgina, primero texto, luego imgenes, enlaces y por ltimo hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

2.1. Etiquetas
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas. Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, est el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre s mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que equivaldra a <br></br>. La etiqueta <br /> escribe un salto de lnea.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minscula, y los valores contenidos entre comillas dobles. Si un atributo tiene ms de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

Hasta hace poco, lo ms usual a la hora de escribir pginas web era que cada etiqueta tuviera bastantes atributos, que se referan a propiedades del formato o representacin de los elementos. La tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente lnea:

Bienvenidos a www.aulaclic.es
Antes, sin estilos: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p> Ahora, con estilos: <p class="presentacion">Bienvenidos a www.aulaclic.es </p> Como veremos en el siguiente tema, en otro

Unidad 2. HTML bsico (II) 2.2. Estructura bsica de la pgina

Todo el documento HTML viene contenido dentro de la etiqueta <html></html>. Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las Etiquetas <head></head> y el cuerpo, delimitado por las etiquetas lugar se definen las caractersticas del estilo.
<body></body>.

Por lo tanto, el aspecto bsico de cualquier pgina web, es el siguiente:

<html> <head> ... </head> <body> ... </body> </html> La etiqueta <head> contiene informacin sobre la pgina. Por ejemplo contiene etiquetas que pueden decir de qu va la pgina, el ttulo que debe de mostrar en la barra del navegador, o cdigo javascript y estilos, que pueden

estar en el propio encabezado o como llamadas a otros archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador. Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De momento slo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el ttulo de la pgina, que es lo que se ve en la barra de ttulo del navegador.

En el <body> encontramos el contenido de la pgina, lo que se ve a travs del navegador: texto, imgenes, enlaces, tablas, etc...

En el siguiente ejemplo, puedes ver que hemos modificado el cdigo que utilizamos en la pgina Primera.htm creada en el tema anterior. En l vemos los elementos que hemos comentado. Hemos aadido la etiqueta <br /> para saltar de lnea. Esta es la primera pgina del sitio que vamos a ir construyendo a lo largo del curso. <html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <p>Bienvenido a Floramics <br /> En esta web encontrars informacin sobre la asociacin y nuestra coleccin de fotografas de flores.</p> </body> </html>

Puedes copiarlo y pegarlo en la siguiente caja de texto y pulsar en Visualizar el cdigo escrito esto har que se abra una ventana o una pestaa en tu navegador en la que podrs ver cmo queda la pgina. Es equivalente a lo que hicimos en el tema anterior con el bloc de notas pero de una forma ms cmoda para ti. Observa como los espacios en blanco no son tenidos en cuenta, un poco ms adelante volveremos sobre este tema.

Unidad 2. HTML bsico (III) 2.3. Estructura del texto

Ya hemos comentado que todo el texto de la pgina estar dentro del <body>, que a su vez estar dentro del <html>. El texto dentro del <body>debe estar dentro de prrafos. En HTML, los prrafos se identifican con la etiqueta <p></p>. Dentro de los prrafos colocaremos texto e imgenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros prrafos anidados. A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde el <h1></h1> de mayor tamao, al <h6></h6>, el ms pequeo. Por ejemplo, utilizaramos un <h1> para poner el rtulo principal de la pgina, <h2> para los ttulos de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada apartado ira contenido en prrafos <p></p>. Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de lnea no se muestran como en el cdigo fuente. Si hay varios espacios seguidos, slo se mostrar uno. Por ejemplo, si en el cdigo fuente escribimos Bienvenido a Floramics se ver Bienvenido a Floramics. Si queremos poner varios espacios seguidos, utilizaremos el cdigo html para el espacio, &nbsp;. El navegador tambin ignora los saltos de lnea. As si dentro de un prrafo colocamos varios saltos de lnea pulsando Intro, estos no se vern. Como ya vimos para crear un salto de lnea dentro de un prrafo, utilizamos la etiqueta <br />.

Puedes ver todo esto en el siguiente ejemplo:

<html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <h1>Bienvenido a Floramics</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin asociacin y nuestra coleccin de

sobre

la de

fotografas

flores.<br /> Tenemos las fotografas organizadas en diferentes categoras</p> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html>

Puedes probar cmo se ve el resultado, y cambiar los tipos de encabezado:

Es interesante utilizar encabezados, ya que muchos programas podrn generar tablas de contenido a partir de cmo hayamos estructurado nuestra pgina.

Unidad 2. HTML bsico (IV) 2.4. Imgenes

Uno de los elementos ms utilizados en una pgina web son las imgenes, tanto para mostrar informacin como parte del propio diseo de la pgina. Pueden ser fotografas o grficos creados por programas como Photoshop, Illustrator. etc. Ms adelante veremos cmo utilizar dos programas gratuitos de este tipo: Gimp e Inkscape. Bsicamente, en pginas web nos encontramos tres tipos de imgenes: GIF, PNG y JPG. Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img de tener esta etiqueta son los siguientes:
/>.

Los atributos que como mnimo ha

<img src="ubicacion/imagen.gif" alt="texto alternativo" /> Lo primero que debemos de saber es dnde est la imagen, su ubicacin, que es lo que debe contener el atributo src: Si la imagen est en una pgina Web, basta con saber su ruta, por ejemplo http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama una direccin absoluta.

Si la imagen est en el mismo sito que la pgina web, podemos utilizar una direccin relativa, como imagen.gif o imagenes/imagen.gif. Si no sabes cmo indicar una direccin relativa, consulta este bsico

Cuando el navegador no encuentre la imagen ubicada en scr no podr mostrar la imagen. En su lugar puede mostrar una imagen de error, como en Internet Explorer que muestra . Adems se mostrar el texto contenido en el atributo alt, ya que sa es su funcin: mostrar un texto alternativo cuando no se puede mostrar la imagen. Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imgenes que hacen de botn para ir a partes de nuestra web, como Inicio o Galera. Si no ponemos el alt, y no se muestran las imgenes, el usuario no podr navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente aadir a la imagen los atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en pxeles. Al cargar una pgina, el navegador muestra primero el texto y despus las imgenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondr el texto y luego ir desplazndolo para colocar las imgenes, lo que har incmodo leer la pgina hasta que no est totalmente cargada.

Otro atributo frecuente en las imgenes es title. Si lo ponemos en la imagen, al posar el cursor sobre ella se mostrar su valor. En IE7, cuando se omite title, se muestra el contenido de alt. Por ejemplo, para el siguiente cdigo se muestra la siguiente imagen: <img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41" title="El logo de aulaClic" /> Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de Windows o desde un programa de grficos. Si cambias esos valores la imagen tambin cambiar. Si reduces los valores, manteniendo la proporcin, la imagen se ver ms pequea, si los aumentas se ver ms grande, pero con peor calidad, como puedes ver en el siguiente ejemplo: <img src="comunes/aulaclic.gif" alt="aulaClic" width="126" height="56" title="El logo de aulaClic" /> Para aumentar o disminuir una imagen es conveniente utilizar un programa grfico, ya que estos programas tienen opciones para optimizar el tamao de las imgenes. En el tema 9 veremos cmo hacerlo con el programa grfico Gimp. Vamos a aadir la siguiente imagen a nuestra pgina de Floramics. La imagen se encuentra en graficos/flor_ejemplo2.jpg Hemos reducido su tamao variando los atributos, lo cual no es una buena tcnica ya que, aunque se ve bien, se tiene que cargar una imagen grande para luego verla ms pequea.

Este es el cdigo: <html> <head> <title>Floramics.Amigos </head> <body> <h1>Bienvenido <h2>Presentacin</h2> <p> En esta web a

de

lasflores</title>

Floramics</h1> la

encontrars informacin sobre

de asociacin y nuestracoleccin s flores.<br /> Tenemos las fotografas organizadas en diferentes categoras.</p> <img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html> fotografa de

Puedes probar cmo se ve el resultado, y cambiar el tamao de la imagen:

Por ltimo, a la hora de elegir una imagen, hemos de tener en cuenta que para poder mostrarla, el navegador debe de descargarla primero. Y es fcil que una sola imagen ocupe ms tamao que el resto de elementos de la pgina. Por eso hemos de intentar optimizar al mximo las imgenes, e intentar que "pesen" lo menos posible, es decir que su tamao en Kb. sea bajo. El sentido comn nos dice que cuanto ms grande sea la imagen, ms ocupa, por lo tanto, hay que procurar usar imgenes lo ms pequeas posibles, siempre que lo que queramos mostrar se vea con suficiente nitidez. Pero dos imgenes del mismo tamao pueden tener pesos diferentes, ya que una de ellas puede tener ms resolucin de la que es necesaria para que se vea bien. Es decir que aparte del tamao influye la resolucin, para optimizar la resolucin de las imgenes conviene utilizar un programa grfico, ya que estos programas tienen opciones para ello

Unidad 2. HTML bsico (V) 2.5. Enlaces

Cualquier pgina web tiene imgenes o texto, que al pulsarlos nos llevan a otra pgina del mismo sitio, o a una pgina de un sitio distinto. Esto es un enlace o hiperenlace (en ingls link o hyperlink) tambin llamado hipertexto o hipervnculo. Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a una mano. Tambin es muy frecuente que los enlaces aparezcan subrayados, ya que es la opcin por defecto que les asigna el HTML. En HTML, el enlace se identifica con la etiqueta <a></a>. La forma ms bsica de un enlace es la siguiente: <a href="archivo_enlazado">contenido del enlace</a> El atributo href indica la direccin (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo http://www.aulaclic.es/index.html . El contenido del enlace es lo que el usuario ve en la pgina y que al pulsar sobre l nos lleva al enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto aqu. Pulsa <a href="http://www.aulaclic.es">aqu</a>. El atributo href puede ser una direccin absoluta, como http://www.aulaclic.es/paginasweb/ejercicios/citas_celebres.htm, o una ejercicios/citas_celebres.htm, de la misma forma que vimos para las imgenes.

direccin

relativa,

como

10

Es muy comn aadir a los enlaces el atributo title, para que muestre informacin sobre el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por defecto, el enlace se abrir en la misma ventana. Si queremos que se abra en una nueva ventana, podemos utilizar el atributo target="_blank". Aunque, el W3C, el organismo que regula los estndares del HTML desaconseja su uso, con la idea de que se debe permitir al usuario decidir si quiere abrir el enlace en la misma u otra ventana pulsando con el botn derecho del ratn sobre el enlace, el atributo target se sigue utilizando porque la mayora de los usuarios pulsan directamente sobre el enlace, sin usar el botn derecho. As pues si en nuestra pgina queremos informar sobre la existencia de otra pgina del mismo tema, colocaremos un enlace a ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa pgina y no se acuerde de volver a la nuestra. Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al usuario a pginas en las cuales no sepa cmo volver a la pgina anterior o como ir a la pgina principal. Siempre es mejor aadir un enlace volver, que confiar en que el usuario utilice el botn Atrs del navegador. Ms adelante, veremos cmo disear un buen sistema de navegacin para nuestro sitio web. Aqu puedes ver un ejemplo con enlaces e imgenes: <html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <h1>Bienvenido a Floramics</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin asociacin y nuestra coleccin de

sobre

la de

fotografas

flores.<br /> Tenemos un ndice alfabtico con todas las fotografas, o puedes verlas organizadas en diferentes categoras.</p> <img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /> <p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a>< h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html>

Un enlace tambin puede llevarnos a una parte concreta dentro de una pgina. Por ejemplo, si la pgina es muy larga podemos poner un enlace que nos lleve al principio de la pgina.

2.6. Divisiones o capas

Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un rectngulo, igual que el prrafo. Pero mientras que el prrafo es ms comn utilizarlo para contener texto, en un div podemos colocar lo

11

que queramos, siempre que respetemos la anidacin. Esta etiqueta nos resultara muy til para distribuir los elementos en nuestras pginas. Esta etiqueta es denominada de muchas formas: divisiones, capas, cajas, contenedores. As que puede que a lo largo del curso utilicemos estos nombres para referirnos a ellas.

Por ejemplo, si queremos colocar la imagen de nuestro ejemplo en la parte derecha, crearemos una capa con el estilo "flotar a la derecha" y pondremos la imagen dentro. Ms adelante explicaremos el estilo "flotar a la derecha" style="float: right".

<html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <h1>Bienvenido a Floramics</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre la asociacin y nuestra coleccin de fotografas de

flores.<br /> Tenemos las fotografas organizadas en diferentes categoras.</p> <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /></div> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html>

Prueba evaluativa unidad 2: HTML bsico

Slo una respuesta es vlida por pregunta 1. Cul de las siguientes se corresponde a la estructura de una etiqueta HTML?
a) <etiqueta atributo valor> b) <etiqueta>atributo="valor"</etiqueta> c) <etiqueta atributo="valor"></etiqueta> d) <etiqueta atributo="valor" atributo2="valor2" /></etiqueta>

2. Las etiquetas que forman la estructura bsica de la pgina son:

a) Una etiqueta html, que contiene a una etiqueta head, que a su vez contiene a una etiqueta body. b) Una etiqueta html, que contiene primero una etiqueta head, y a continuacin una etiqueta body. c) Una etiqueta html, que contiene las etiquetas head y body, en cualquier orden. d) Una etiqueta html, una head y una body, cada una a continuacin de la anterior.

3. Dnde escribiremos el texto de una pgina?

a) Dentro del body, y a su vez en otras etiquetas, como prrafos, encabezados, tablas... b) Dentro del head, utilizando siempre prrafos (p).

12

c) Siempre pondremos el primer texto de la pgina en un h1, luego en un h2, h3... y as sucesivamente. d) Slo podemos ponerlo en prrafos (p) dentro de la pgina.

4. Cmo conseguimos saltar de lnea en medio del texto?

a) Creando un salto de lnea en el cdigo fuente. b) Comenzando un nuevo prrafo, o introduciendo la etiqueta <br c) Cualquiera de las respuestas anteriores. d) Ninguna respuesta es correcta. 5. Cules de estas imgenes podemos utilizar en una pgina web? a) Imgenes HTML. b) Imgenes PNG y JPEG. c) Imgenes BMP y GIF. d) Cualquiera de las anteriores. 6. Qu indica el atributo alt de la imagen? a) Un texto que se mostrar si la imagen no se puede cargar. b) La ubicacin del archivo de la imagen. c) Un ttulo que se ver en cualquier navegador al pasar el cursor sobre la imagen. d) El alto de la imagen. 7. Para qu sirven los enlaces en una pgina web? a) Para ir a otra parte de la pgina. b) Para abrir otras pginas. c) Para descargar un archivo. d) Cualquiera de las anteriores es cierta. 8. Qu atributo del enlace indica el archivo enlazado? a) El atributo alt. b) El atributo src. c) El atributo href. d) El atributo link.
/>.

9. Cmo hacemos que una imagen enlace con una pgina?

a) Colocando la etiqueta de imagen dentro de la del enlace. b) Aadiendo a la imagen el atributo con el archivo enlazado. c) Aadiendo a la etiqueta de enlace el atributo con el origen de la imagen. d) Los enlaces slo pueden ser de texto.

10. Para qu sirve la etiqueta div?

a) Para dividir una pgina en subpginas. b) Principalmente para organizar el contenido en nuestras pginas. c) Para hacer la pgina ms divertida. d) Para crear prrafos de texto.

13