Unidad 1.

Mi primera página web (I)

1.1. Introducción

Pulsa en este icono para ver un videotutorial con el contenido de esta unidad.

El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando
herramientas gratuitas.

Para seguir el curso sólo necesitas un ordenador y ganas de aprender, al final del curso
podrás crear páginas como la que puedes ver haciendo clic aquí o aquí.

El lenguaje que se utiliza para crear una página 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 creación de páginas web.

Vamos a explicar brevemente que queremos decir con esto. Lo fundamental para escribir
páginas web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu página
necesitarás saber un poco sobre gráficos web, para recortar la imagen al tamaño 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.

También es conveniente utilizar un editor web para facilitar la escritura de páginas web, como
KompoZer, para que tu página sea agradable es conveniente saber algo sobre diseño web, y
por último para que todo el mundo mundial vea tu trabajo necesitarás subir tu página a un
servidor de Internet y darla a conocer.

Pues bien, todo esto y un poco más es lo que hay en este curso. Además hemos intentado
explicarlo de forma que lo pueda entender cualquier persona sin conocimientos previos sobre
todos estos temas. Dicho así, parece una misión casi imposible, esperamos que sigas todo el
curso y llegues al final cumpliendo estas espectativas. Es un reto complicado pero esperamos
crear un curso que sea un punto de partida a este apasionante mundo de la comunicación
global a través de Internet y te dote de la visión general que te permita avanzar hasta lograr
crear páginas web atractivas y completas. A final del curso estamos seguros que lograrás crear
conocimiento y ponerlo a disposición de las personas, y algo del espiritu de colaboración y
 gratuidad desde el que está hecho este curso quizás llegue a contagiarte un poco. Se acaba
dando parte de lo que se recibe.

Por supuesto, tratar todos estos temas en profundidad exigiría un curso de un tamaño
enorme, pero el objetivo es dar una introducción a cada tema, de forma que el alumno se pueda
desenvolver en las tareas básicas y tenga las nociones suficientes para poder ampliar lo que
más 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 más facil de entender hemos desarrollado el temario de forma progresiva
mediante la creación de un sitio web sobre flores, introduciendo cada concepto según se va
necesitando.

Así, primero (tema 2,3) veremos los conceptos básicos de HTML, escribir texto, darle
formato, hiperenlaces, estilos, etc. Luego (tema 5) explicaremos brevemente el editor
KompoZer, luego veremos como estructurar una página web y un sitio web (tema 6), más
adelante introduciremos el programa Gimp para trabajar con gráficos (tema 9), unas ideas para
crear gráficos vectoriales, como por ejemplo un logotipo para la página, 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 cómo publicar
nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas.

1.3. Metodología

Como hemos dicho los diversos conceptos los introduciremos según sean necesarios a
medida que vamos desarrollando un sitio web. Primero crearemos una página sencilla para
introducir los elementos básicos de HTML, luego iremos añadiendo elementos a esa página,
como un menú, gráficos, formularios, etc.

En algunos temas, sobre todo al principio, la explicación será un poco más teoría y general.
Muchas veces, encontrarás la opción de probar el código 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 más en trabajar sobre el sitio de ejemplo, realizando
cambios concretos. Por eso, te sugerimos que vayas creando el mismo sitio, asegurándote de
haber aplicado los cambios explicados en cada tema.
 Los temas están explicados también en videotutoriales, 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 más visual.

Al final de cada tema encontrarás unos ejercicios propuestos. Con ellos, irás creando otro
sitio con lo visto en cada tema.

Unidad 1. Mi primera página web (II)

1.4. Alternativas

Crear páginas web es la forma básica de comunicar en Internet, pero no la única, ni la más
adecuada para todos los casos.

Si te gusta la informática y quieres tener tu propio sitio web como una afición, o si quieres
crear un sitio web para tu club de fútbol, tu pequeña empresa o para dedicarte profesionalmente
al mundo de Internet, este curso, probablemente, te interesará mucho. Si en cambio la
tecnología te espanta un poco y sólo te intersa la parte más literaría seguramente haya otras
formas de publicar en Internet que te resulten más adecuadas, como, por ejemplo, los blogs.
Escribir contenidos en un blog es más sencillo que crear una página web aunque menos flexible.
En cualquier caso, puedes empezar a leer el curso, quizás te sorprenda lo sencillo que es crear
una página web.

1.5. Servidores y direcciones URL

Cuando visitamos páginas web en realidad estamos accediendo a archivos en un servidor

web. La dirección o URL tiene este formato:

http://www.nombredominio.com/directorio/paginaweb.htm

Donde http:// es el protocolo y www. indica el sistema de páginas web. Habrás observado
que no hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de
añadirlo, no porque nos ea necesario. nombredominio.com es el nombre del sitio. Al ir
directamente ahí, vamos a su página de inicio. La última parte indica el archivo del sitio que
estamos viendo. En este caso, una página llamada paginaweb.htm que está en una carpeta
llamada directorio.

Podemos visitar una dirección desde un buscador o desde un enlace en otra página.
Podemos teclear la dirección en la barra de direcciones del navegador o acceder desde
nuestros favoritos.

Internet esta formada por un conjunto de servidores conectados. Un servidor es un ordenador

conectado a la red de acceso a Intenet que dispone de un programa que es capaz de recibir
una URL y devolver una página web al que hizo la petición.

Podríamos decir que Internet está formado por una gran cantidad de ordenadores que
pueden intercambiar información entre ellos. Es una gran red mundial de ordenadores.

Los ordenadores se pueden comunicar porque están unidos a través de conexiones y

gracias a que utilizan un lenguaje o protocolo común, el TCP/IP.

Según el esquema que podemos ver en la imagen, un usuario se conecta a la red (a través
de un módem o un router, ya sea vía línea telefónica, cable, satélite, 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) dándole a conocer tu dirección física.

Utilizando TCP/IP, el ISP asigna una dirección IP a tu PC y en ese momento se te da

acceso a la red.

Cuando queremos acceder a una página proporcionamos un dominio que es traducido en

los Servidores DNS y localizado. Cuando sabemos en qué Servidor Web se encuentra la
página que queremos visitar se procede a su descarga y visualización en el navegador del PC.

Unidad 1. Mi primera página web (III)

1.6. ¿Qué es una página web?

Una página web es un documento de texto con marcas, llamadas etiquetas (tags en inglés).
Cuando este documento se ve a través de un navegador web, las etiquetas se interpretan y se
visualiza el documento como una página web. Las etiquetas no se muestran pero determinan
el aspecto de la página, y otras características, por ejemplo, si el texto es un enlace, en la
etiqueta se indica la página a la que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de

escribir una página web. Sólo necesitamos conocer el lenguaje de las etiquetas o HTML.

Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello
deberás de tener dos ventanas abiertas, una con el curso y otra con el programa
correspondiente. Si no sabes cómo hacerlo, te lo explicamos en este básico .
 Vamos a comenzar por escribir una página web muy sencilla. Para ello utilizaremos un editor
de texto sin formato, como puede ser el Bloc de notas (Notepad) incluído 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 menús.

Si no estás familiarizado con las forma de escribir en un ordenador, consulta este básico
.

Escribiremos el siguiente código. Más adelante ya veremos qué es cada elemento:

<html>
<head>
<title>Mi primera página</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 extensión de un archivo. La extensión indica de qué tipo es un archivo. La extensión son las
tres letras que van después 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 través del menú Organizar → Opciones de carpeta y búsquedas, pestaña Ver,
desmarcando la opción Ocultar extensiones de archivo para tipos de archivos conocidos,
en Windows Vista. En Windows XP encontramos esta opción en el
menú Herramientas → Opciones de carpeta, también en la pestaña Ver.

Vamos a continuar guardando la página. Pulsamos en el menú Archivo y elegimos Guardar.

Introducimos el nombre, por ejemplo Primera. Si ahora pulsásemos Guardar, se guardaría con
la extensión txt, que indica que es un documento de texto sin formato. Para guardarlo como
una página web, debemos de emplear la extensión .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 extensión .htm, se abrirá la
página 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, verás 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 título de la página, y la etiqueta <p> indica un párrafo con texto
normal.

Por lo tanto, un navegador web es una aplicación capaz de interpretar el código HTML,
formado por etiquetas y mostralo debidamente formateado. En cualquier momento, podemos
ver el código HTML de la página que estamos viendo. En Internet Explorer, podemos hacerlo
desde el menú Ver → Código fuente, y se mostrará utilizando el Bloc de notas. En Mozilla
 Firefox lo hacemos también desde el menú Ver, eligiendo la opción Mostrar el código fuente
de la página (teclas Ctrl + U), y muestra el código fuente formateado con colores. Puedes
probarlo viendo el código fuente de esta página.

Si necesitas más ayuda con el Bloc de notas, puedes verla en este básico .

1.7. Un sitio web

Cuando tenemos varias páginas, podemos organizarlas en un sitio web. Un sitio no es más
que una carpeta que se encuentra en un equipo informático, ya sea nuestro ordenador personal
o un potente servidor. La primera carpeta es la carpeta raiz. Por ejemplo, si accedemos a
"www.aulaclic.es", estamos accediendo a la carpeta raiz del sitio de aulaClic.

Cuando escribimos "www.aulaclic.es" en el navegador, en realidad estamos accediendo a la

página www.aulaclic.es/index.htm, es decir, al escribir una dirección 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 página web".

Tal como lo haríamos con una carpeta de Windows, podemos organizar nuestro sitio con
subcarpetas. Por ejemplo, una carpeta con todas las imágenes, otra con los vídeos, etc.

Coloquialmente, es frecuente referirse a un sitio web sólo como página web, por ejemplo "se
ha actualizado la página web del ministerio", aunque no nos estemos refiriendo a una página
en concreto.

Veremos más detenidamente qué es un sitio web cuando creemos los sitios para nuestras
páginas, más adelante.

Prueba evaluativa unidad 1: Mi primera página web

Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta.

Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.

Si pulsas Restablecer podrás repetir la evaluación.

1. Una página web...

a) Es un archivo que contiene texto, delimitado por marcas.

b) Es un archivo, con datos sólo entendibles por un ordenador.

c) Es una imagen, una copia de una página física.

2. Las etiquetas HYML, se delimitan por los caracteres...

a) [ y ]

b) < y >

c) { y }

d) ^ y ^

3. Para crear una página web utilizamos...

a) Programas específicos 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) Cualqueira de los anteriores.

4. Un navegador web es...

a) Una aplicación que gestiona y clasifica las páginas web.

 b) Una página que nos permite buscar información en la web.

c) Una aplicación que interpreta el código de una página y nos lo muestra formateado.

d) Una aplicación que nos permite crear y editar páginas web, desde su código fuente.

5. ¿Cuales de estas extensiones de archivo corresponden a una página web?

a) La extensión .css

b) La extensión http o https.

c) La extensión html.

d) Cualquiera de las anteriores.

6. Un sitio web...

a) Es un equipo que almacena las páginas web.

b) Es la agrupación de varias páginas relacionadas en un directorio común.

c) Es lo mismo que una página web.

Unidad 2. HTML básico (I)

A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero
veremos la estructura general de las etiquetas, luego la estructura básica de la página, a
continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes,
 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 equivaldría
a <br></br>. La etiqueta <br /> escribe un salto de línea.

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 minúscula, y los
valores contenidos entre comillas dobles. Si un atributo tiene más 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 más usual a la hora de escribir páginas web era que cada etiqueta tuviera
bastantes atributos, que se referían a propiedades del formato o representación de los
elementos. La tendencia actual es la de separar el formato del contenido, descartando estos
atributos, sustituyéndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente línea:

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 lugar se definen las caracteristicas del estilo.

Unidad 2. HTML básico (II)

2.2. Estructura básica de la página

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 <body></body>. Por
lo tanto, el aspecto básico de cualquier página web, es el siguiente:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas
que pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador,
o código 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
sólo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>,
que contiene el título de la página, que es lo que se ve en la barra de título del navegador.
 En el <body> encontramos el contenido de la página, lo que se ve a través del navegador:
texto, imágenes, enlaces, tablas, etc...

En el siguiente ejemplo, puedes ver que hemos modificado el código que utilizamos en la
página Primera.htm creada en el tema anterior. En él vemos los elementos que hemos
comentado. Hemos añadido la etiqueta <br /> para saltar de línea. Esta es la primera página
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 encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar
código .

Luego pulsar en Visualizar el código escrito esto hará que se abra una ventana o una
pestaña en tu navegador en la que podrás ver cómo queda la página. Es equivalente a lo que
hicimos en el tema anterior con el bloc de notas pero de una forma más cómoda para ti. Observa
como los espacios en blanco no son tenidos en cuenta, un poco más adelante volveremos sobre
este tema.

Luego puedes añadir un salto de línea y un nuevo texto "Tenemos las fotografías organizadas
en diferentes categorías" y volverlo a visualizar.

Unidad 1. Nivel Básico. Probar el código

A lo largo de este curso es conveniente que vayas probando todo lo que se explica.

Puedes hacerlo de varias formas:

 1.- Desde un editor de código. Nosotros recomendamos Brackets porque nos parece muy
bueno y gratis. Puedes seleccionar el código que se muestra en los ejemplos y pegarlo en un
archivo de Brakets. Luego puedes utilizar la vista previa para ver el resultado. Esta forma de
probar es la más recomendable, pero si no tienes a mano un ordenador con un editor de código
puedes utilizar una de las opciones siguientes.

2.- Desde el propio navegador.

2.1.- Sin salir de aulaClic. Selecciona y copia el código html que hay en este primer recuadro
(o cualquier otro código), pégalo en el siguiente recuadro y pulsa el botón "Visualizar el código
escrito", se abrirá una ventana del navegador con el resultado.

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<p>Bienvenido a Floramics
<br /> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.</p>
</body>
</html>

Pega o escribe código html en el siguiente recuadro. Pulsa el botón para visualizar el
resultado:

Borrar

2.2. En otras páginas. Hay varias páginas web que permiten introducir código HTML y ver el
resultado. Por ejemplo: w3schools.org, y codepen.io
 En cualquier caso, siempre es conveniente ver el archivo .html en un navegador web, ya que
en ocasiones la vista en vivo de Brackets y los sistemas que acabamos de citar no ofrecen el
mismo resultado que el navegador web. Además en conveniente probar la página en los
navegadores más utilizados (como mímimo en Chrome y Firefox) y en dispositivos móviles.

Unidad 2. HTML básico (III)

2.3. Estructura del texto

Ya hemos comentado que todo el texto de la página estará dentro del <body>, que a su vez
estará dentro del <html>. El texto dentro del <body>debe estar dentro de párrafos. En HTML,
los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos texto
e imágenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener
otros párrafos anidados.

A su vez, disponemos de encabezados que nos permiten organizar el texto. Los

encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por
ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos
de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada apartado iría
contenido en párrafos <p></p>.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de
línea no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se
mostrará uno. Por ejemplo, si en el código fuente
escribimos Bienvenido a Floramics se verá Bienvenido a Floramics. Si
queremos poner varios espacios seguidos, utilizaremos el código html para el espacio, &nbsp;.

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios
saltos de línea pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea
dentro de un párrafo, 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>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías</p>

<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes probar cómo se ve el resultado, y cambiar los tipos de encabezado:

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar
código .

Es interesante utilizar encabezados, ya que muchos programas podrán generar tablas de

contenido a partir de cómo hayamos estructurado nuestra página.

A la hora de escribir texto, hay más cosas que hemos de tener en cuenta relativas al idioma
y a los caracteres especiales, como las letras acentuadas y la ñ. Puedes verlas en este tema
avanzado .

Puedes realizar este ejercicio paso a paso para crear una página sencilla.

Unidad 2. Ejercicio paso a paso: Crear una página básica

Objetivo

Vamos a practicar los elementos vistos hasta ahora para crear una sencilla página web desde
su código fuente. Para hacerla, utilizaremos el Bloc de notas(Todos los
programas → Accesorios)

Ejercicio

1. Abre un documento en blanco con el bloc de notas, y guárdalo con el nombre que quieras.
2. Dentro del documento, crea las etiquetas que forman la estructura de la página:
 3. <html>
4. <head>
5. </head>
6. <body>
7. </body>

</head>

8. Dentro del head, añade el título de la página con la etiqueta <title>:

<title>Ejercicio de HTML</title>

9. Dentro del body, añade el siguiente encabezado 1: <h1>Página de ejemplo</h1>

10. A continuación, añade el siguiente encabezado 2: <h2>Texto normal</h2>.

11. Añade el siguiente párrafo: <p>El ñandú común es un ave sudamericana muy
parecida al avestruz.</p>.

12. Añade el siguiente párrafo: <p>Este ave, es omnívora y no puede volar,

aunque es una gran corredora.</p>

13. Añade el siguiente párrafo con saltos: <p>Otras aves emparentadas con el ñandú
son: <br /> - El avestruz<br /> - El emú<br /> - El kiwi.</p>.
14. Añade el siguiente encabezado 2: <h2>Caracteres especiales</h2>.

15. Añade el siguiente párrafo: <p>El &ntilde;and&uacute; com&uacute;n es un

ave sudamericana muy parecida al avestruz.</p>.
16. Guarda la página y pruébala.
17. Comprueba que el tercer párrafo muestra saltos de línea, aunque no aparezcan en el
código fuente.
18. Comprueba que el primer y último párrafo se ven iguales aunque están escritos de distinta
forma.

Unidad 2. HTML básico (IV)

2.4. Imágenes

Uno de los elementos más utilizados en una página web son las imágenes, tanto para mostrar
información como parte del propio diseño de la página. Pueden ser fotografías o gráficos
creados por programas como Photoshop, Illustrator. etc. Más adelante veremos cómo utilizar
dos programas gratuitos de este tipo: Gimp e Inkscape.
 Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y JPG.
Puedes ver con más detalle cada formato en este básico .

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos
que como mínimo ha de tener esta etiqueta son los siguientes:

<img src="ubicacion/imagen.gif" alt="texto alternativo" />

Lo primero que debemos de saber es dónde está la imagen, su ubicación, que es lo que debe
contener el atributo src:

 Si la imagen está en una página Web, basta con saber su ruta, por
ejemplo http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama una dirección
absoluta.

 Si la imagen está en el mismo sito que la página web, podemos utilizar una dirección
relativa, como imagen.gif o imagenes/imagen.gif. Si no sabes cómo indicar una
dirección relativa, consulta este básico .

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 .
Además se mostrará el texto contenido en el atributo alt, ya que ésa es su función: mostrar
un texto alternativo cuando no se puede mostrar la imagen. Esto es importante para la
accesibilidad a la web. Imaginemos que tenemos unas imágenes que hacen de botón para ir a
partes de nuestra web, como Inicio o Galería. Si no ponemos el alt, y no se muestran las
imágenes, el usuario no podrá navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height (alto)
y width (ancho), introduciendo en ellos las dimensiones de la imagen, en píxeles. Al cargar
una página, el navegador muestra primero el texto y después las imágenes. Si conoce las
dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondrá el texto
y luego irá desplazándolo para colocar las imágenes, lo que hará incómodo leer la página hasta
que no esté totalmente cargada.

Otro atributo frecuente en las imágenes 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 código 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 gráficos. Si cambias esos valores la imagen también
cambiará. Si reduces los valores, manteniendo la proporción, la imagen se verá más pequeña,
si los aumentas se verá más 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 gráfico, ya que
estos programas tienen opciones para optimizar el tamaño de las imágenes. En el tema 9
veremos cómo hacerlo con el programa gráfico Gimp.

Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se encuentra

en graficos/flor_ejemplo2.jpg

Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya que,
aunque se ve bien, se tiene que cargar una imagen grande para luego verla más pequeña.

Este es el código:

<html>
<head>
 <title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</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 página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes probar cómo se ve el resultado, y cambiar el tamaño de la imagen:

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar
código .

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 fácil que una sola imagen ocupe
más tamaño que el resto de elementos de la página. Por eso hemos de intentar optimizar al
máximo las imágenes, e intentar que "pesen" lo menos posible, es decir que su tamaño en Kb.
sea bajo. El sentido común nos dice que cuanto más grande sea la imagen, más ocupa, por lo
tanto, hay que procurar usar imágenes lo más pequeñas posibles, siempre que lo que queramos
mostrar se vea con suficiente nitidez.

Pero dos imágenes del mismo tamaño pueden tener pesos diferentes, ya que una de ellas
puede tener más resolución de la que es necesaria para que se vea bien. Es decir que aparte
del tamaño influye la resolución, para optimizar la resolución de las imágenes conviene utilizar
un programa gráfico, ya que estos programas tienen opciones para ello. En el tema 10 veremos
cómo hacerlo con el programa gráfico GIMP. Con Photoshop se hace como se muestra en
este enlace del curso de aulaClic. Y con Illustrator como se muestra aquí.

Unidad 2. HTML básico (V)

2.5. Enlaces

Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra página del
mismo sitio, o a una página de un sitio distinto. Esto es un enlace o hiperenlace (en
inglés link o hyperlink) también llamado hipertexto o hipervínculo.

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. También es muy frecuente que los enlaces aparezcan
subrayados, ya que es la opción por defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace
es la siguiente:

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (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 página 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>.

se verá así: Pulsa aquí.

El atributo href puede ser una dirección absoluta,

como http://www.aulaclic.es/paginasweb/ejercicios/citas_celebres.htm, o una direccion relativa,
como ejercicios/citas_celebres.htm, de la misma forma que vimos para las imágenes.

Es muy común añadir a los enlaces el atributo title, para que muestre información sobre
el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por
ejemplo:

Pulsa aquí. → Pulsa <a href="http://www.aulaclic.es" title="Visita la

web de aulaClic">aqu&iacute;</a>.

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 estándares 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 botón
derecho del ratón sobre el enlace, el atributo target se sigue utilizando porque la mayoría de
 los usuarios pulsan directamente sobre el enlace, sin usar el botón derecho. Así pues si en
nuestra página queremos informar sobre la existencia de otra página del mismo tema,
colocaremos un enlace a ella y le pondremos el atributo target="_blank" para evitar que el
usuario se vaya a esa página y no se acuerde de volver a la nuestra.

Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al
usuario a páginas en las cuales no sepa como volver a la página anterior o como ir a la página
principal. Siempre es mejor añadir un enlace volver, que confiar en que el usuario utilice el
botón Atrás del navegador. Más adelante, veremos como diseñar un buen sistema de
navegación para nuestro sitio web.

Aquí puedes ver un ejemplo con enlaces e imágenes:

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos un índice alfabético con todas las fotografías, o puedes verlas
organizadas en diferentes categorías.</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 página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar
código .

Un enlace también puede llevarnos a una parte concreta dentro de una página. Por ejemplo,
si la página es muy larga podemos poner un enlace que nos lleve al principio de la página. En
este tema avanzado puedes ver cómo hacer esto y algunas cosas más.

2.6. Divisiones o capas

 Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un
rectángulo, igual que el párrafo. Pero mientras que el párrafo es más común utilizarlo para
contener texto, en un div podemos colocar lo que queramos, siempre que respetemos la
anidación. Esta etiqueta nos resultara muy útil para distribuir los elementos en nuestras páginas.

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. Más
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>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</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 página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar
código .

Ejercicio:

Utilizando el bloc de notas, crea una página como la que puedes ver si pulsas aquí.

Guárdala llamándola platosemana.html, y la utilizaremos en la siguiente unidad.

Si necesitas ayuda, puedes consultar la solución aquí.

Ayuda ejercicios unidad 2: HTML básico

Solución

Para crear una página como la del ejemplo, sigue estos pasos:

1. Abre el bloc de notas, desde Inicio → Todos los programas → Accesorios → Bloc de
notas.
2. Escribe el siguiente texto en la página:

3. <html>
4. <head>
5. <title>Plato de la semana</title>
6. </head>
7. <body>
8. <h1>Plato de la semana</h1>
9. <h2>Berenjenas fritas</h2>
10. <p>Comensales: 4 personas</p>
11. <p>Tiempo de reparaci&oacute;n: 10 minutos</p>
12. <p>Tiempo de cocci&oacute;n: 12 minutos</p>
13. <p>Ingredientes: </p>
14. <p>4 berenjenas.</br />
15. Sal.</br />
16. Pimienta.</br />
17. 4 cucharadas de harina y aceite.</p>
18. <p>Preparaci&oacute;n:</p>
19. <p>Lavar las berenjenas.</br />
20. Cortarlas en rodajas.</br />
21. Espolvorearlas con sal.</br />
22. Dejar que suelten el agua durante 30 minutos.</br
/>
23. Enharizarlas, ponerlas a freir durante 5 minutos en
aceite bien caliente.</p>
24. </body>
 </html>

25. Guarda la página, desde el menú Archivo → Guardar.

26. Elige Todos los archivos en el desplegable y dale el nombre platosemana.html.
27. Selecciona la carpeta con los ejercicios del curso y pulsa Guardar.

En la siguiente unidad, volveremos a utilizar este archivo.

Prueba evaluativa unidad 2: HTML básico

Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta.

Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.

Si pulsas Restablecer podrás repetir la evaluación.

1. ¿Cuál 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 básica de la página 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 continuación 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 continuación de la anterior.

3. ¿Dónde escribiremos el texto de una página?

a) Dentro del body, y a su vez en otras etiquetas, como párrafos, encabezados, tablas...

b) Dentro del head, utilizando siempre párrafos (p).

c) Siempre pondremos el primer texto de la página en un h1, luego en un h2, h3... y así
sucesivamente.

d) Sólo podemos ponerlo en párrafos (p) dentro de la página.

4. ¿Cómo conseguimos saltar de línea en medio del texto?

a) Creando un salto de línea en el código fuente.

b) Comenzando un nuevo párrafo, o introduciendo la etiqueta <br />.

c) Cualquiera de las respuestas anteriores.

d) Ninguna respuesta es correcta.

5. ¿Cuáles de estas imágenes podemos utilizar en una página web?

a) Imágenes HTML.

b) Imágenes PNG y JPEG.

 c) Imágenes 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 ubicación del archivo de la imagen.

c) Un título 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 página web?

a) Para ir a otra parte de la página.

b) Para abrir otras páginas.

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. ¿Cómo hacemos que una imagen enlace con una página?

a) Colocando la etiqueta de imagen dentro de la del enlace.

b) Añadiendo a la imagen el atributo con el archivo enlazado.

c) Añadiendo a la etiqueta de enlace el atributo con el origen de la imagen.

d) Los enlaces sólo pueden ser de texto.

10. ¿Para qué sirve la etiqueta div?

a) Para dividir una página en subpáginas.

b) Principalmente para organizar el contenido en nuestras páginas.

c) Para hacer la página más divertida.

d) Para crear párrafos de texto.