Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
<HTML>
1. ESTRUCTURA DE UNA PÁGINA WEB.
Las páginas Web se elaboran utilizando el lenguaje Hyper Text Markup Language (HTML). Este
lenguaje nace en 1991 de manos de Tim Bernes-Lee del CERN. Los archivos HTML son archivos de
texto ASCII, sin ningún tipo de forma ni codificación especial, es decir, pueden ser leídos perfectamente
por el Bloc de Notas de Windows o por el editor del DOS.
PRÁCTICA 1
Abre el navegador Mozilla Firefox.
Carga la página [Link] que se encuentra en la carpeta web: Archivo/Abrir
archivo/D:\web\web1\[Link]
Pulsa Ver/Código fuente de la página.
Se abrirá una nueva ventana que nos muestra la estructura interna de la página.
La programación se realiza a base de incluir unos códigos, conocidos como etiquetas o tags.
Las etiquetas se escriben encerradas con los signos < >: <HTML>, <HEAD>, <BODY>, etc.
Muchas etiquetas funcionan en pareja, la primera indica el comienzo de un determinado formato y la
segunda, que es igual pero con el carácter /, especifica el final de dicho formato. Por ejemplo:
<B>texto</B> se presentará como texto.
Todos los documentos empiezan y terminan igual. Al principio todo documento HTML siempre
encontraremos la etiqueta <HTML>, y al final siempre aparecerá la etiqueta </HTML>. Estas dos
etiquetas son las que informan al navegador de que todo lo que se encuentra entre ellas es una única
página (documento) HTML. Delante de <HTML> no debe introducirse ningún código ni cadena de texto.
Del mismo modo, detrás de </HTML> no podrá haber texto ni código alguno.
El documento HTML propiamente dicho se encuentra contenido entre <HTML> y </HTML>, y está
dividido en dos partes o secciones:
La primera sección se denomina cabecera (“head”) y ocupa siempre la primera parte del documento. Está
delimitada por dos etiquetas, <HEAD> que se sitúa al principio de la cabecera y está inmediatamente
detrás de <HTML>, y </HEAD> que cierra la cabecera.
Entre <HEAD> y </HEAD> podemos introducir todas aquella información que, aún siendo de
importancia, no queremos que aparezca en pantalla: título de la página, descriptores, etc.
Dentro de la cabecera se puede poner una etiqueta, que es la única imprescindible: el título de la página.
Es lo que veremos como título de la ventana en los navegadores que lo permitan. Es como se conocerá
nuestra página en algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios. Por
tanto, parece importante pensarnos bien como llamarla.
Su formato es:
<TITLE>Mi primera página</TITLE>
Así, el título de nuestra página será: “Mi primera página”.
La segunda sección en la que se divide un documento HTML es lo que se denomina el cuerpo (“body”).
El cuerpo del documento contiene toda la información, imágenes, texto, es decir, todo aquello que
aparecerá.
Página 1 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
De las ocho etiquetas que hemos visto hasta ahora, seis son las que determinan la estructura del
documento HTML (por decirlo de alguna forma, el recipiente en el que podremos introducir los
elementos de nuestra página), y por ello se denominan etiquetas estructurales. Resumiendo podemos
decir que la estructura mínima de un documento HTML es como sigue:
<HTML> (Etiqueta que indica que lo que viene a continuación es un documento HTML).
<HEAD> (Etiqueta de apertura de la cabecera: aquí va la información sobre el título de la página,
el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el
título que aparecerá en la barra de título de la parte superior.
</HEAD> (Etiqueta de cierre de la cabecera)
<BODY> (Etiqueta de apertura de cuerpo: aquí va el contenido de la página que será lo que se
presente en pantalla.
</BODY> (Etiqueta de cierre del cuerpo).
</HTML> (Etiqueta de cierre del documento)
Por supuesto una página como ésta aparecería en pantalla como una página en blanco, totalmente vacía.
Para que aparezca algo en pantalla, tendremos que introducir el texto o código correspondiente entre las
etiquetas <BODY> y </BODY>.
PRÁCTICA 2
Abre el Bloc de Notas
Escribe las etiquetas necesarias para crear el documento HTML.
Pon un título a la página.
Dale contenido al cuerpo escribiendo un renglón y pulsando la tecla INTRO para saltar al siguiente
párrafo.
Escribe otro renglón y pulsa dos veces la tecla INTRO.
Escribe un tercer renglón y guarda el fichero en el disco de trabajo con el nombre [Link]
manteniendo el tipo como documento de texto.
Carga en el navegador el documento que acabamos de salvar y comprueba los resultados.
La presentación de esta primer página no es muy atractiva porque nos falta colocar una serie de etiquetas
para indicar los saltos de línea y párrafo.
<BR> es la etiqueta que sirve para indicarle al navegador que debe hacer un salto de línea.
<P> indica un salto de párrafo e introducirá un doble salto de línea. Se distingue del anterior
en que el espacio que deja entre línea y línea es mayor.
Estas etiquetas no necesitan un cierre.
PRÁCTICA 3
Vuelve a abrir el Bloc de Notas.
Carga la anterior creación ([Link]).
Pon un título a nuestra página.
Introduce la etiqueta <BR> donde habías pulsado una vez la tecla INTRO.
Pon <P> donde inicialmente habías pulsado dos veces la tecla INTRO.
Guarda el archivo como [Link].
Pasa al navegador y carga esta nueva página para comprobar el resultado.
2. LAS CABECERAS.
Uno de los elementos de formato que nos resultará imprescindible será la diferenciación de tamaños de
letras para poder introducir títulos de epígrafes y organizar visualmente la información.
Disponemos para esta tarea de seis formatos predeterminados de cabeceras. Para utilizarlos deberemos
poner la etiqueta de apertura delante de la primera letra cuya apariencia deseemos modificar y cerrar tras
Página 2 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
la última para volver al texto normal. (Además las etiquetas de cabecera introducen un salto de párrafo sin
necesidad de indicarlo).
El código... ...da como resultado
<H1> Cabecera 1</H1>
Cabecera 1
<H2> Cabecera 2</H2> Cabecera 2
<H3> Cabecera 3</H3> Cabecera 3
<H4> Cabecera 4</H4> Cabecera 4
<H5> Cabecera 5</H5> Cabecera 5
Cabecera 6
<H6> Cabecera 6</H6>
3. ENFATIZACIÓN.
Otro elemento del que disponemos para resaltar un fragmento de texto es la utilización de las tipografías
en negrita, itálicas y subrayadas. Su utilización se ajusta al convenio general de etiqueta de apertura y
etiqueta de cierre limitando el texto al que se aplica el efecto.
Este código... ...da como resultado
Esta <B>palabra</B> está en <B>negrita</B> Esta palabra está en negrita
Esta <I>palabra</I> está en <I>itálica</I> Esta palabra está en itálica
Esta <U>palabra</U> está <U>subrayada</U> Esta palabra está subrayada
4. JUSTIFICACIÓN.
La justificación del texto por defecto se hace a la izquierda.
Además de la justificación por defecto podemos también justificar el texto a partir del centro, a partir de
la derecha, a la izquierda o a ambos márgenes. Para hacerlo deberemos poner al principio del párrafo que
deseamos justificar la etiqueta de apertura y la de cierre en el final.
<CENTER> y </CENTER> marcan la justificación centrada.
<DIV ALIGN=x> y </DIV> permite justificar el texto del párrafo a la izquierda (ALIGN=LEFT), a la
derecha (RIGHT), o a ambos márgenes (JUSTIFY).
PRÁCTICA 4
Vuelve al Bloc de Notas y abre el fichero [Link].
Modifica el contenido del cuerpo incorporando los siguientes elementos:
Dos cabeceras de diferente tamaño.
Un párrafo con la justificación por defecto, otro con justificación centrada, otro con justificación a la
derecha y otro justificado a ambos márgenes.
Alguna palabra resaltada en negrita, en itálica o subrayada.
Guarda el documento como [Link] y pasa al navegador para comprobar los resultados. (Si algo no
hubiera quedado como habías previsto vuelve al Bloc de Notas para localizar el error, lo corriges y,
una vez guardado el documento, vuelve a comprobarlo).
5. CARACTERES ESPECIALES.
Si te has fijado en los ejemplos habrás visto que en los textos de los mismos no hay acentos, ni eñes, ni
símbolos de interrogación o exclamación. Eso es debido a los distintos juegos de caracteres que manejan
los ordenadores.
Las máquinas manejan la información en código binario. Estos, a su vez, forman los números, los cuales
se traducen en letras.
Página 3 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
El problema está en que cada ordenador es de un fabricante distinto y puede adoptar una tabla diferente al
resto. Para poder evitarlo existen diversos estándares y el más extendido es el de ASCII. De hecho,
actualmente todos los ordenadores tienen la misma tabla ASCII para los primeros 127 caracteres. Pero esa
tabla no contiene vocales con acento, ni eñes, ni símbolos para abrir interrogación o exclamación...
La manera de incluir los caracteres extendidos (cuyo número está más allá del 127) consiste en encerrar
en código entre los caracteres y; . Así pues, lo siguiente:
189;
nos debería dar un medio (1/2). También existe una serie de sinónimos para poder recordar con más
facilidad estos caracteres. Así, por ejemplo, 189; también se puede escribir como frac12;. Vamos a
ver algunos de estos códigos, los más útiles a la hora de escribir en español:
Código Resultado
aacute;, Aacute;, eacute;, Eacute;,... á, Á, é, É, ...
ntilde; u Ntilde ñyÑ
iquest; ¿
iexcl; ¡
copy;
reg;
PRÁCTICA 5
Abre [Link] en el Bloc de Notas.
Pon todas las tildes y demás caracteres especiales que hagan falta.
Guarda el archivo como [Link].
6. INSERTAR IMÁGENES.
Para insertar una imagen se utiliza la etiqueta <IMG>. Esta etiqueta es de inicio y no de fin, ya que no
tiene sentido alguno. En esta etiqueta se introducen campos (atributos) que nos dan las características de
la imagen. Hay que tener en cuenta que las imágenes sólo pueden tener formato JPG o GIF.
La presentación de las características de las etiquetas es análoga en todos los casos. En primer lugar el
nombre de la misma, un símbolo de igual = y su valor. Tanto si son caracteres, como si son números,
siempre aparecen entre símbolos de comilla, “valor”.
Atributo Descripción
SRC La ruta al archivo de la imagen.
ALIGN Alinea el texto, comenzando arriba, en medio o abajo del lateral de la imagen.
ALT Nombre alternativo que se visualizará en los navegadores que no soporten gráficos.
WIDTH Especifica el ancho de la imagen.
HEIGTH Especifica la altura de la imagen
BORDER Indica si la imagen se rodea con un marco y el ancho de este, poner borde=0 para sin
marco.
Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona por medio del parámetro
ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
Valor de ALIGN Utilidad
TOP Coloca el punto más alto de la imagen coincidiendo con lo más alto de la línea
de texto actual.
MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto.
BOTTOM (por defecto) Alinea el punto más bajo de la imagen con la base del texto.
LEFT Coloca la imagen a la izquierda del texto.
RIGHT Coloca la imagen a la derecha del texto.
Página 4 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
Un ejemplo sería: <img src=”grá[Link]” align=”top” border=0>
PRÁCTICA 6
Abre el fichero [Link].
Inserta alguna de las imágenes de la carpeta Web1.
Escribe un texto conjuntamente con la imagen, en cualquier posición.
Guarda el archivo como [Link].
Comprueba el resultado en el navegador.
7. INSERTAR ENLACES.
Los enlaces son los elementos característicos de las páginas Web ya que nos permiten cambiar entre
distintas páginas de una forma ágil.
Para realizar un enlace a otro recurso de Internet se emplea la etiqueta <A HREF=”recurso”></A>. Todo
lo que se encierre entre el tag de inicio y final servirá de enlace al recurso indicado. Por ejemplo:
<A HREF=”[Link]”>Historia del museo</A> El contenido intermedio de las etiquetas será
el soporte del salto, es decir, en este caso aparecerá en pantalla: Historia del museo y si hacemos clic
con el ratón sobre ella cambiamos a la página Web [Link].
<A HREF=”[Link] oficial del museo</A> La diferencia que presenta
este caso con el anterior es el tipo de salto que aparece en HREF. En el caso anterior le indicamos un
salto a una página Web que está en el mismo ordenador que la llama, y en este caso la página destino
aparece en otro ordenador de la red Internet, de ahí la necesidad de añadir http:// antes del nombre de
la nueva página. Aquí aparecerá en nuestra página Página oficial del museo.
<A HREF=”[Link] SRC=”[Link]”></A> Esta etiqueta
presenta dos diferencias con las anteriores: en primer lugar el tipo de salto es a una dirección de
correo electrónico, que lo indicamos con [Link] el resultado es la ejecución del programa que
usemos como correo por defecto, con el campo de dirección rellenado. La segunda diferencia radica
en el soporte del salto: tenemos anidadas dos etiquetas, una externa de enlace y otra interna de
imagen, el significado es que aparece una imagen de correo y si hacemos clic sobre ella activamos el
enlace, es decir, el soporte es una imagen.
8. INSERTAR SONIDOS.
Se puede insertar en nuestra página Web sonidos, ya que tanto Netscape como Explorer incorporan desde
hace tiempo la capacidad de reproducir sonido. El único problema es que los archivos suelen ser grandes
y, siendo algo innecesario y superfluo, poca gente incluye melodías en sus páginas.
Los formatos que se pueden asegurar que los navegadores reproducirán son los archivos WAV y MID.
Para poder reproducir otros necesitarán el plug-in o añadido necesario, como puede ser el Real Audio
para los archivos RA o el ModPlug para los MOD y derivados.
La manera más sencilla de incluir sonidos es dejando al usuario la decisión de escucharlos o no. Para
hacerlo incluiremos el sonido en el parámetro HREF de un enlace, como si fuera una página HTML:
<A HREF=”[Link]”>Si pulsas te saludo</A>
También podemos insertar un sonido de fondo, que esté sonando todo el tiempo. El insertarlo es más
complicado, ya que Netscape y Explorer ofrecen soluciones propietarias, distintas e incompatibles de
hacer sonar un archivo de fondo.
En Explorer, desde la versión 2.0, se pueden incluir fondos sonoros utilizando la etiqueta BGSOUND:
<BGSOUND SRC=”[Link]”>
Página 5 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
El parámetro SRC indicará el archivo a reproducir. Esta etiqueta admite también otro parámetro, LOOP,
que indica el número de veces consecutivas que sonará el fichero. Si se indica LOOP=”infinite”, el
archivo se reproducirá indefinidamente mientras estemos en la página.
Netscape utiliza su etiqueta <EMBED>. Teóricamente, esta etiqueta debería servir para unir objetos de
varios tipos a la página Web, pero en la práctica sólo se utiliza para esto. Esta etiqueta tiene los siguientes
parámetros:
Parámetro Utilidad
SRC Contiene el nombre de archivo de sonido a reproducir.
WIDTH y HEIGHT En Netscape aparece un pequeño reproductor, estos parámetros especifican su
tamaño.
AUTOSTART=”true” Arranca automáticamente la reproducción.
LOOP=”true” Reproduce ininterrumpidamente el fichero hasta que salimos de la página.
HIDDEN=”true” Oculta el reproductor.
PRÁCTICA 7
Abre el archivo [Link].
Añade Localización del Museo del Prado, que será un enlace a la página [Link]
Añade Museo Reina Sofía, que será un enlace a la página Web oficial del museo Reina Sofía, cuya
dirección es: [Link]
Inserta el plano llamado thysplan, añade un texto a dicho plano.
Inserta un sonido de fondo.
Guarda como [Link].
Comprueba los resultados en el navegador.
9. MARCOS (FRAMES)
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada
marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica
en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición
de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que
contendrá. Vamos a ver un ejemplo de este tipo de documento:
<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS=”20%,80%”>
<FRAME NAME=”indice” SRC=”[Link]”>
<FRAME NAME=”principal” SRC=”introducció[Link]”>
<NOFRAMES>
<P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de
visualizar marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
PRÁCTICA 8
Abre el navegador.
Comprueba el resultado del ejemplo anterior, que se encuentra en la carpeta Web1 con el nombre de
[Link]
Página 6 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las
etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY
es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana actual (sea la general o un
marco) en varias ventanas definido por el parámetro COLS o por ROWS. En éste, separado por comas, se
define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniéndoles un
nombre y especificando qué fichero html le corresponde mediante la etiqueta <FRAME>. Por último,
especificamos qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último,
especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que el navegador no soporte
frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
9.1. Etiqueta <FRAMESET>
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las
extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más.
En general, los navegadores dibujan un borde de separación entre los marcos. Si deseas eliminarlo puedes
hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a
eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>
Cuando eliminamos ese borde, podrás ver cómo el navegador deja aún un hueco entre marcos. Este se
elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños
separadas por comas. Se admiten los siguientes formatos de tamaño:
Con porcentajes: podemos definir el tamaño de un marco como un porcentaje del espacio total
disponible.
Absolutos: si ponemos un número a secas, el marco correspondiente tendrá el tamaño
especificado en pixels.
Sobre el espacio sobrante: si colocamos un asterisco(*) estaremos indicando que queremos
todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se
repartirán el espacio equitativamente. Si queremos que uno tenga más deberemos ponerle al
asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que
su compañero, que tiene un asterisco sólo.
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS=”10%,*,200,2*”>
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir,
64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el
doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el
cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definición de marcos; debemos asegurarnos
de tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la
página.
Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro
<FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
<FRAMESET COLS=”20%,80%>
<FRAME NAME=”indice” SRC=”[Link]”>
<FRAMESET ROWS=”*,80”>
<FRAME NAME=”principal” SRC=”introducció[Link]”>
Página 7 de 8
Creación de páginas WEB
Departamento de Tecnología
IES Enrique Tierno Galván (Leganés)
<FRAME NAME=”ejemplos” SRC=”[Link]>
</FRAMESET>
</FRAMESET>
PRÁCTICA 9
Abre el navegador.
Comprueba el resultado del ejercicio anterior. Se encuentra en la carpeta Web1 con el nombre de
[Link]
9.2. Etiqueta <FRAME>
Esta etiqueta define tan solo las características de un marco determinado, no de un conjunto de ellos.
Estos son los parámetros que admite:
Parámetro Utilidad
NAME Asigna un nombre a un marco para que después podamos referirnos a él.
SRC Indica la dirección del documento HTML que ocupará el marco.
SCROLLING Decide si se colocan o no barras de desplazamiento al marco para que podamos
movernos por su contenido. Su valor es por defecto AUTO que deja al
navegador la decisión. Las otras opciones que tenemos son YES y NO.
NORESIZE Si lo especificamos el usuario no podrá cambiar de tamaño el marco.
FRAMEBORDER Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero
se eliminará el borde con todos los marcos contiguos que tengan también este
valor a cero.
MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en
pixels.
MARGINHEIGHT Igual al anterior pero con márgenes verticales.
9.3. Acceso a otros marcos.
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que
queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no
ocurra. Por ejemplo, si tenemos un marco que no sirve de índice y otro donde mostramos los contenidos
sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo
gracias al parámetro TARGET.
Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve
para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en
el que por defecto se nos muestra todos los enlaces.
Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una
excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los
ejemplos anteriores, si en el marco llamado “indice” tenemos un enlace que queremos se abra en el marco
“principal” pondremos:
<A HREF=”[Link]” TARGET=”principal”>
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:
_top Elimina todos los marcos existentes y muestra la nueva página en la ventana original sin
marcos.
_blank Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self Muestra la nueva página en el marco donde está declarado el enlace.
_parent Muestra la nueva página en el <FRAMESET> que contiene el marco donde se declara
el enlace. En el ejemplo de <FRAMESET> anidados, un enlace situado en el marco
ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre
los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
Página 8 de 8
