Temario Web

Francisco Herenas Ramos
I.E.S. Número 2 de Aspe

Curso 2.006 / 2.007
Ciclo Formativo de Grado medio Explotación de un Sistema Informático (I.E.S. Número 2 de Aspe)
1.- Terminología
¾ World Wide Web
Es un sistema hipermedia de información que aprovecha los recursos de Internet y que

está basado, a su vez, en la utilización de un sistema uniforme de identificación de
recursos, protocolos de accesos a dichos recursos y documentos de hipertexto que facilitan
el acceso y la navegación entre recursos.
¾ Hipermedia, Multimedia
Es un formato que incluye texto, sonido, imágenes, vídeo, etc.
¾ Internet
Red mundial de redes de ordenadores basada en el uso común de los protocolos TCP/IP.
¾ URL (Uniform Resource Locator)
Es el sistema de identificación de recursos en el sistema WWW. Un recurso puede ser un

documento HTML, una imagen, un archivo de audio, un programa, etc.
¾ Hipertexto
Es un formato de documento que permite incluir no sólo texto sino también enlaces que
facilitan el acceso a otras partes del documento, a otros documentos o, en general, a otros
recursos del sistema.
¾ HTTP
Protocolo específico de WWW para la transmisión de documentos de hipertexto.
¾ TCP/IP
Protocolos o conjuntos de normas que definen la transmisión de datos en la red Internet

entre ordenadores.
2.- Los navegadores.

El navegador es el nombre que comúnmente recibe la aplicación utilizada para visualizar las
páginas de los servidores Web. Son aplicaciones capaces de comunicarse con los servidores
usando el protocolo HTTP y de interpretar, como mínimo, el código HTML en el que se escriben
las páginas. Generalmente, están integrados con los programas usados para gestionar el
correo electrónico y otros servicios disponibles en Internet, además de incorporar extensiones
para reproducción de audio, vídeo, etc.
Inicialmente, se basaban en una interfaz de tipo texto aunque, actualmente, los más utilizados
son de tipo gráfico y de sencillo manejo. Los más conocidos son programas gratuitos que
pueden descargarse de la propia Web o conseguirse a través de otros medios como
publicaciones informáticas en CD-ROM. Suelen incorporar características avanzadas, como una
agenda en la que incluir las direcciones preferidas, un almacenamiento local de páginas
visitadas, etc.
3.- Hipertexto.
Los documentos o páginas Web que se pueden ver en cualquier navegador son en su mayoría,
páginas HTML.
2
Creación de páginas Web en HTML
Estas páginas HTML (HyperText Markup Language) no son más que texto, al que se le han
añadido ciertas etiquetas para que cualquier navegador sepa qué debe hacer para presentar
la información en pantalla. Estas etiquetas tienen atributos que le indican cómo hacer esta
tarea.
Por tanto, un archivo HTML se puede leer y modificar, entonces, cada ve que un usuario se
conecte a un sitio Web, dicho sitio le enviará al navegador un archivo HTML que contiene la
página solicitada. El navegador, al recibir dicho archivo, lo lee e interpreta. Las etiquetas le
indican cómo representar el texto, con qué fuente, color o formato, y dónde debe situar las
tablas o imágenes, construyendo así la información que luego se verá en la pantalla.
4.- Elementos básicos para construir un documento HTML.
4.1.- La página HTML mínima.
Todo documento o página HTML comienza con <HTML> y acaba con </HTML>. Cada uno de
estos elementos se llama etiqueta y, normalmente, hay una etiqueta de comienzo y otra de
fin, que marcan la región o área que se ve afectada por dicha etiqueta. La de fin es igual a la
de comienzo, pero con el carácter “/” delante.
Las etiquetas, para diferenciarlas del texto, van entre símbolos de menor “<” y mayor “>”, que
indican dónde comienza y acaba la etiqueta. Lo que hay entre estos dos símbolos es la
etiqueta propiamente dicha, que no se verá en pantalla, ya que su función es indicar al
navegador cómo debe representar la información en pantalla. Estas etiquetas pueden leerse
como:
• <HTML> => Aquí empieza un documento HTML.

• </HTML> => Aquí acaba un documento HTML.
Toda página HTML tiene una cabecera, que viene delimitada por la etiqueta <HEAD> y su
cierre </HEAD>, y un cuerpo, indicado con la etiqueta <BODY> y su cierre </BODY>.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Para cargar el archivo HTML en el navegador Internet Explorer activaremos a la opción del
menú ARCHIVO y pulsaremos en ABRIR.
En la cabecera suele ponerse el título, mediante la etiqueta <TITLE> y su cierre </TITLE>.
3
El texto que vaya entre la marca de comienzo y la marca de fin de esta etiqueta será el título
de la página, que se muestra en el marco del navegador, sobre los menús. En el cuerpo de la
página se pone el texto que irá en la ventana principal del navegador.
<HTML>
<HEAD>
<TITLE> Mi primera página </TITLE>
</HEAD>
<BODY>
Hola. Ésta es mi primera página HTML.
</BODY>
</HTML>
4.2.- Cómo dar formato al texto.
Como en cualquier libro, puede ser que ciertas partes del texto deban remarcarse en negrita,
itálica o subrayado. Para cambiar el aspecto del texto se emplean las siguientes etiquetas:
¾ Negrita (bold) => Se emplea la etiqueta <B> y su cierre </B>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Hola.</B> Ésta es mi primera página HTML.
</BODY>
</HTML>
¾ Itálica (italic) => Se emplea la etiqueta <I> y su cierre </I>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Hola.</B> <I>Ésta</I> es mi primera página HTML.
</BODY>
</HTML>
¾ Subrayado (underline) => Se emplea la etiqueta <U> y su cierre </U>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Hola.</B> <I>Ésta</I> <U>es</U> mi primera página HTML.
</BODY>
</HTML>
¾ Texto destacado (emphasis) => Se emplea la etiqueta <EM> y su cierre </EM>.
<HTML>
<HEAD>
</HEAD>
<BODY>
4
<B>Hola.</B> <I>Ésta</I> <U>es</U> <EM>mi</EM> primera página

HTML.
</BODY>
</HTML>
¾ Texto muy destacado (strong emphasis) => Se emplea la etiqueta <STRONG> y su

cierre </STRONG>
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Hola.</B> <I>Ésta</I> <U>es</U>
<EM>mi</EM> <STRONG>primera</STRONG> página HTML.
</BODY>
</HTML>
¾ Subíndice => Se emplea la etiqueta <SUB> y su cierre </SUB>
<HTML>
<HEAD>
</HEAD>
<BODY>
<EM>mi</EM> <STRONG>primera</STRONG> <SUB>página</SUB> HTML.
</BODY>
</HTML>
¾ Superíndice => Se emplea la etiqueta <SUP> y su cierre </SUP>
<HTML>
<HEAD>
</HEAD>
<BODY>
<EM>mi</EM> <STRONG>primera</STRONG>
<SUB>página</SUB> <SUP>HTML</SUP>.
</BODY>
</HTML>
Hay que destacar que estas etiquetas se pueden combinar, es decir, se puede tener texto con
negrita, subrayado e itálica. Para ello basta con anidar las etiquetas:
<B><I><U>Hola. Como esta </U></I></B>
No sólo se puede modificar el aspecto del texto, también se puede cambiar su tamaño, tipo de
fuente o color.
Para cambiar el aspecto del texto se emplea la etiqueta <FONT> y su cierre </FONT>, que a
diferencia de las anteriores emplea “atributos”. Las etiquetas le dicen al navegador qué debe
hacer con el texto que lee, mientras los atributos le dicen cómo debe hacerlo. Para ello se
asignan nuevos valores a ciertos atributos (el valor del atributo debe ir siempre entre comillas)
de las etiquetas.
5
Indica el tamaño deseado. Los posibles tamaños van desde 1, muy pequeño,
¾ SIZE
a 7, muy grande. El valor por defecto es 3.
Sirve para cambiar el tipo de letra empleado. Los tipos de fuentes que
¾ FACE indiquemos deberán estar instalados, si no, la fuente utilizada por defecto es
Times New Roman.
Nos permite cambiar el color del texto. Hay algunos colores básicos
¾ COLOR predefinidos como black, yellow, green, etc. Los demás se deben especificar
en formato RGB.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT FACE=”VERDANA” SIZE=”5” COLOR=”blue”>Me llamo PACO</FONT>
</BODY>
</HTML>
Hasta ahora se ha visto cómo dar formato al texto, cuando éste constituye un único párrafo.
Algo importante que aún no se ha mencionado es que, aunque haya un cambio de línea en el
archivo HTML o incluso varios, el navegador mostrará dicho texto todo junto en una única
línea.
<BODY>
Este texto
estará
en una sola línea.

</BODY>
Es decir, el navegador cambia de línea sólo cuando se le acabe la pantalla, no cuando vea un
cambio de línea en el texto. La única forma de forzar un cambio de línea se realiza mediante la
etiqueta <BR>, que introduce un salto de línea.
<BODY>
Este texto<BR>
Estará<BR>
<BR><BR>
en una sola línea.
</BODY>
Para evitar tener que poner estos saltos de línea, está la etiqueta de párrafo <P> y su cierre
</P>. Todo lo que esté entre estas etiquetas constituye un único párrafo, que el navegador
presentará como tal.
Un párrafo puede estar alineado, atributo ALIGN, a la izquierda (left), derecha (right), centro
(center) o justificado (justify).
<BODY>
<P ALIGN =”left”>A la izquierda</P>
<P ALIGN =”center”>Al centro</P>
<P ALIGN =”right”>A la derecha</P>
6
<P ALIGN =”justify”>Justificado</P>

</BODY>
4.2.1.- Caracteres especiales.
El navegador, igual que no reconoce los altos de línea, tampoco reconoce los blancos.
El blanco o espacio, es un carácter especial y la única forma de introducir unos se hace

mediante el código de carácter especial correspondiente. A continuación se exponen los
caracteres especiales principales:
Símbolo Representación Símbolo Representación

Espacio en blanco ó ó
< < (Menor que) ú ú
> > (Mayor que) Á Á
& & (Ampersand) É É
" “ (Dobles comillas) Í Í
- (símbolo resta) Ó Ó
á á Ú Ú
é é ñ ñ
í í Ñ Ñ
4.2.2.- Texto preformateado.
Como no se quiera que el navegador modifique el aspecto de un párrafo, porque ya tiene el

aspecto deseado, se le indicará con la etiqueta <PRE> y su cierre </PRE> que ya está
PREformateado. Todo lo que esté entre estas dos etiquetas se verá tal cual.
<BODY>
<PRE>
int function factorial (int n)
begin
int a,i;
a = 1;
for (i=1; i <=n; i++)
a = a*1;
return(a);
end
</PRE>
</BODY>
4.2.3.- Cabeceras.
Las páginas HTML, como todo documento en general, deben estar organizadas si se quiere que
sean legibles. En un libro, se emplean los capítulos y las secciones, aquí están las cabeceras.
Éstas tienen distintos niveles de importancia, desde el 1 al 6. Cada una se define con la
etiqueta <Hx> y su cierre </Hx>.
<BODY>
<H1>Esta es una cabecera de nivel 1</H1>
</BODY>
7
Estas cabeceras se pueden alinear mediante el atributo ALIGN a la izquierda (left), derecha
(right) o centro (center):
<BODY>
<H1 ALIGN=”left”>Esta es una cabecera alienada a la izquierda</H1>
<H2 ALIGN=”right”>Esta es una cabecera alienada a la derecha</H2>
<H3 ALIGN=”center”>Esta es una cabecera centrada</H3>
</BODY>
4.2.4.- Líneas horizontales.
Además de las cabeceras, puede ser muy útil poner líneas horizontales para dividir las
secciones, identificadas con las cabeceras, en bloques más pequeños. Estas líneas se hacen
con la etiqueta <HR>.
Se puede definir el ancho de estas líneas con el atributo WIDTH de la etiqueta. Lo más normal
es expresar el ancho de la línea en porcentaje, aunque también puede ser en puntos:
<BODY>
<HR WIDTH=”20%”>
<HR WIDTH=”50%”>
<HR WIDTH=”20”>
<HR WIDTH=”50”>
</BODY>
Una línea se puede alinear, atributo ALIGN, a la izquierda (left), derecha (right) o centro
(center).
<BODY>
<HR WIDTH=”60%” ALIGN=”left”>
<HR WIDTH=”60%” ALIGN=”right”>
<HR WIDTH=60%” ALIGN=”center”>
</BODY>
También se puede modificar el grosor de la línea, con el atributo SIZE, e incluso indicar si la
línea está sombreada o no, NOSHADE, para darle aspecto tridimensional.
<BODY>
<HR WIDTH=”60%” SIZE=”1”>
<HR WIDTH=”60%” SIZE=”3” NOSHADE>
<HR WIDTH=”60%” SIZE=”8”>
<HR WIDTH=”60%” SIZE=”15” NOSHADE>
</BODY>
4.2.5.- Comentarios.
El código HTML, a medida que crece el archivo y su complejidad, puede volverse poco legible.
Para ayudar a mantener el código legible y comprender qué hace cada etiqueta, es
imprescindible poner comentarios, como en un lenguaje de programación.
El comienzo de un comentario se marca con . Todo lo que esté
comprendido entre estas cadenas de caracteres será ignorado por el navegador y no se verá
en pantalla.
8
4.2.6.- Fondos.
El fondo de la página puede cambiarse de color del mismo modo que se hizo con el texto o con
las líneas. Para ello, se emplea el atributo BGCOLOR de la etiqueta <BODY>. El color va
expresado en formato RGB.
Para emplear una imagen de fondo. Esta imagen se repite tantas veces como sea necesario
hasta completar el fondo de la página. En este caso se emplea el atributo BACKGROUND de la
etiqueta <BODY> al que se asigna el archivo que contiene la imagen, incluido el camino de
acceso:
<BODY BACKGROUND=”aguas.gif”>
Página con fondo
</BODY>
En algunos navegadores (Internet Explorer) puede dejarse fijo el fondo y que el texto se
desplace sobre el fondo, aunque no es algo estándar. Se emplea el atributo
BGPROPERTIES=”FIXED”
<BODY BACKGROUND=”aguas.gif” BGPROPERTIES=”FIXED”>

Página con fondo fijo
</BODY>
4.3.- Imágenes.
En cualquier página Web las imágenes son tan importantes o más que el texto. Hacen la
página más atractiva y legible, permitiendo localizar dónde está cada cosa de un vistazo.
Para incorporar imágenes a una página se emplea la etiqueta <IMG>, que indica al navegador
que a continuación se va insertar una imagen.
Hay que indicar qué imagen quiere cargarse y dónde está. Para ello se emplea el atributo SRC.
A este atributo se le asigna el archivo que contiene la imagen, incluyendo el camino para
acceder a la misma.
<BODY>
<IMG SRC=”imagenes/gato.gif”>
</BODY>
Se suele indicar el tamaño de la figura, por dos razones, primero, le permite saber al
navegador cuánto va a ocupar, por lo que puede reservarle espacio y seguir cargando el resto
de la página sin necesidad de esperar a traerse toda la imagen, así la página se mostrará más
rápido; segundo, permite redefinir cuánto va a ocupar la imagen, modificando el tamaño que
originalmente tenía, para ello se emplean los atributos WIDTH (ancho) y HEIGHT (alto), que
expresan en puntos o pixels el ancho y alto que tendrá la figura, independientemente de
cuánto tuviese antes.
De todos modos, estos atributos no deben emplearse para hacer iconos a partir de imágenes
grandes, ya que se verán como imágenes pequeñas en la pantalla y al usuario le parecerán
iconos, pero la máquina tardará mucho en cargar cada uno de estos falsos iconos por su gran
tamaño.
<BODY>
<IMG SRC=”imagenes/gato.gif” WIDTH=”120” HEIGHT=”90”>
</BODY>
9
Un atributo que es muy útil para los usuarios que tienes navegadores en modo texto es ALT,
que muestra un texto ALTernativo a la figura, de forma que, aunque alguien no vea la figura,
pueda entender la página.
<BODY>
<IMG SRC=”imagenes/gato.gif” WIDTH=”120” HEIGHT=”90” ALT=”gato”>
</BODY>
Las imágenes se pueden alinear, igual que los párrafos o cabeceras, mediante el atributo
ALIGN. La diferencia es que la imagen se alinea respecto al texto que la rodea, no respecto a
la página donde está. Se puede alinear horizontalmente: a la izquierda (left), derecha (right) o
centro (center), o verticalmente: arriba (top), en medio (middle) o abajo (bottom).
4.4.- Enlaces.
Obviamente son muy importantes en cualquier página Web. Son los que permiten navegar por
Internet y los que lo han hecho tan popular. Permiten ir de un sitio a cualquier otro con sólo
pulsar un botón del ratón.
Se basan en la etiqueta <A> y su cierre </A>, entre la etiqueta de comienzo y su cierre habrá
un enlace.
El atributo más importante de esta etiqueta es HREF, el destino del enlace, es decir, el URL
que se carga en el navegador cuando el usuario selecciona el enlace. Se puede poner cualquier
URL válido, esto incluye documentos en otras máquinas, en la misma máquina e incluso saltar
dentro de la misma página a otra sección.
<HTML>
<HEAD>
<TITLE> Enlace a Netscape </TITLE>
</HEAD>
<BODY>
Si quiere la última versión de navegador NETSCAPE váyase a
<A HREF=”http://www.netscape.com”>Netscape</A>
</BODY>
</HTML>
El enlace que se muestra al usuario no tendrá por qué ser texto, también podrá mostrarse una
imagen. Esto ayuda muchas veces a la navegación, por que es más intuitivo y fácil pinchar
sobre el logotipo de una empresa que no sobre su nombre. Para ello basta con cargar una
imagen en el sitio del enlace:
<HTML>
<HEAD>
<TITLE> Enlace a Netscape </TITLE>
</HEAD>
<BODY>
Si quiere la última versión de navegador NETSCAPE váyase a
<A HREF=”http://www.netscape.com”><IMG SRC=”netscape.gif”></A>
</BODY>
</HTML>
En estos casos es importante no olvidarse del atributo ALT para que la gente que no emplee
navegadores gráficos pueda seguir el enlace.
Para suprimir la línea que aparece alrededor de la imagen ponga el atributo BORDER a cero.
En estos casos también es mejor centrar la imagen respecto del texto, si no queda alineado el
borde inferior con el texto. Para ello, basta con asignar el atributo ALIGN el valor center.
10
No sólo se pueden hacer enlaces a sitios remotos, también se puede cargar una página local,
para ello basta con poner en el atributo HREF el archivo HTML que se quiera cargar, indicando
el camino para llegar hasta él.
<BODY>
Se ha añadido un capítulo sobre
<A HREF=”../index.html”>REDES</A>
</BODY>
Incluso se puede referir a algún sitio dentro de una página, es decir, no es obligatorio saltar al
principio de la página, sino que se puede ir a cualquier punto de la misma, para ello basta con
identificar dicho punto con un nombre mediante el atributo NAME. Luego, para referenciar
dicho sitio, se añade en el destino del enlace, tras el archivo el nombre que antes se le ha
asignado.
<BODY>
<A NAME=”TABLAS”>
<H3>enlace dentro de la misma página</H3>
“TABLAS” no es un enlace que se puede pinchar, simplemente se ha identificado como posible

destino de un enlace.
Más adelante, en ese archivo o en otro se puede saltar directamente en este punto, sin ir al
comienzo de la página.
<A HREF=”index.html#TABLAS”>REDES</A>
</BODY>
El archivo y el nombre se separan por el carácter “#”.
También se puede hacer referencia a un archivo que no sea HTML, por ejemplo, se puede
poner en un servidor Web un currículum “curri.com” o un conjunto de ejemplos HTML
comprimidos “ejemplos.zip”. El comportamiento del navegador variará luego en función de los
plug-in que tenga instalados el usuario. Si no tiene instalado ningún plug-in que sepa tratar
con estos archivos, los salvará a disco.
<BODY>
Se ha añadido nuevos
<A HREF=”../index.html”>ejemplos</A>
</BODY>
Esto se emplea bastante para cargar imágenes grandes. Para evitar hacer muy lenta la carga
se pone la misma imagen pero en pequeño, thumbnails, junto al texto que habla de dicha
imagen. La imagen pequeña realmente es un enlace a la imagen grande. Si resulta de interés
para el usuario, éste pinchará la imagen para verla en todo su tamaño, para ello basta con
poner como destino la imagen grande, como se ha hecho con otros archivos, y luego, como
enlace, la imagen pequeña. Es mejor no ponerle borde e indicar el tamaño de forma que la
carga sea rápida. También se puede cargar una página HTML cuyo contenido principal sea la
imagen.
<BODY>
<A HREF=”img_grande.jpg”>
<IMG SRC=”img_peque.gif” WIDTH=”90” HEIGH=”62” BORDER=”0”>
</A>
</BODY>
11
En el atributo HREF se puede poner un programa de modo que si alguien pincha en el enlace
no se cargará otra página, sino que se ejecutará el programa indicado en el atributo. Por
ejemplo, para mandar un mai:
<BODY>
Si tienes algún problema manda un mail al
<I><A HREF=”mailto:webmaster@servidor.com”>Webmaster</A></I>
</BODY>
4.5.- Mapas.
Un caso especial de imágenes y enlaces es la combinación de ambos para usar imágenes como
mapas sensibles al ratón. Dependiendo del sitio de la imagen donde se pinché, se seleccionará
un documento y otro.
Para implementar este comportamiento se divide la imagen en zonas y a cada zona se le

asocia un enlace distinto. El mapa se define con la etiqueta <MAP> y su cierre </MAP>, dentro
de este mapa, cada nueva zona de la imagen se define con la etiqueta <AREA>. Esta AREA
puede tener forma de círculo, cuadrado o rectángulo. Por ejemplo:
<BODY>
<MAP NAME=”mi_mapa”>
<AREA SHAPE=”RECT” COORDS=”X1,Y1,X2,Y2” HREF=”enlace1.html”>
<AREA SHAPE=”CIRC” COORDS=”x,y,r” HREF=”enlace2.html”>
<AREA SHAPE=”POLY” COORDS=”x1,y1,x2,y2,x3,y3” HREF=”enlace3.html”>
<AREA SHAPE=”DEFAULT” NOHREF>
</MAP>
<IMG SRC=”mapa.gif” USEMAP=”#mi_mapa”>
</BODY>
Con la etiqueta <MAP> se avisa de que se va a definir un mapa sensible al ratón, con el
atributo NAME se le asigna un nombre de mapa.
Entre las etiquetas <MAP> y su cierre </MAP> se definen las áreas en que se divide la
imagen, así como el enlace asociado a cada una de ellas, mediante la etiqueta <AREA>. Esta
etiqueta tiene varios atributos:
¾ SHAPE => Indica la forma del área a definir. Puede ser:
Un rectángulo (RECTANGLE, RECT).

Un círculo (CIRCLE, CIRC).
Un polígono (POLYGON, POLY).
un área por defecto (DEFAULT).
¾ COORDS => Coordenadas. Varían según el área especificada.
Si es un rectángulo se especifica la esquina superior izquierda (x1,y1) y la esquina

inferior derecha (x2,y2).
Si es un círculo se especifica el centro (x,y) y el radio (r).
Si es polígono se dan sus “n” puntos: (x1,y1),(x2,y2), etc.
Si es el área por defecto se supone que es toda el área de la imagen que no se ha
asignado previamente a otras áreas. En caso de que dos áreas tengan puntos
comunes, éstos permanecerán a la primera área que los haya definido. Si se pone el
área por defecto, la última tendrá todos los puntos que no estén en ninguna otra
área, es decir, “el resto” de la imagen.
¾ HREF => Es un enlace como los que ya se han visto previamente. Se puede especificar
explícitamente que en ciertas áreas no se desea saltar a ningún lado con NOHREF.
12
¾ ALT => Tiene la misma utilidad que en la imágenes, es decir, mostrar un texto cuando se
sitúa el ratón encima, y es especialmente útil para navegadores que no tengan capacidad
de mostrar imágenes, sólo texto.
Una vez definido el mapa se carga la imagen con <IMG>, indicando qué imagen cargar con el
atributo SRC y usando el mapa antes definido con el atributo USEMAP.
Es importante resaltar que es aconsejable poner los mismos enlaces en modo texto bajo la
figura de modo que las personas que no puedan cargar imágenes puedan seguir navegando
por estas páginas.
A continuación hay un ejemplo de mapa, con un triángulo, un cuadrado y un círculo
<HTML>
<HEAD>
<TITLE> Mapas </TITLE>
</HEAD>
<BODY>
<MAP NAME=”prueba”>
<AREA SHAPE=”CIRCLE” COORDS=”60,40,20” HREF=”prev.html” ALT=”Prev”>
<AREA SHAPE=”RECT” COORDS=”120,20,160,60” HREF=”indice.html”
ALT=”Indice”>
<AREA SHAPE=”POLY” COORDS=”200,20,240,40,200,60” REF=”sig.html”
ALT=”Sig”>
<AREA SHAPE=”DEFAULT” NOHREF>
</MAP>
<CENTER>
<FONT SIZE=”6” FACE=”impact”>
<P>Ejemplo de imagen con capa</P>
</FONT>
</CENTER>
<BR>
<P>
Se puede construir un mapa a partir de la imagen que se muestra. El círculo
enlazará con la página previa, “prev.html”, el cuadrado con el índice,
“indice.html” y el triangulo con la siguiente, “sig.html”.
</P>
<BR>
<P>El tamaño de la imagen es 280x80.</P>
<BR>
El círculo está en el punto (60,40) con radio 20.
El cuadrado está en (140,40) con 40 puntos de lado.
El triángulo tiene 40 puntos de alto y 40 de ancho.
Los vértices están en (200,20), (240,40) y (200,60)
<BR>
<CENTER>
<IMG SRC=”mapa.gif” USEMAP=”#PRUEBA” BORDER=”0”>
</CENTER>
</BODY>
</HTML>
4.6.- Listas.
Algo útil en cualquier texto es la posibilidad de tener listas de elementos para enumerar
distintas opciones o para mostrar, de forma ordenada, alguna idea.
13
4.6.1.- Listas no numeradas.
Estas listas, son una sucesión de elementos sin numerar; se basan en un par de etiquetas:
<UL></UL> => Comienzo y fin de una lista no numerada.

<LI></LI> => Elemento de la lista.
4.6.2.- Listas numeradas.
Estas listas, son una sucesión de elementos numerados:
<OL></OL> => Comienzo y fin de una lista numerada.

<LI></LI> => Elemento de la lista.
4.6.3.- Listas de definiciones.
Estas listas, se emplean para definir términos:
<UL></UL> => Comienzo y fin de una lista de definiciones.

<LI></LI> => Elemento a definir.
<DD> => Definición del elemento.
4.6.4.- Atributos de las listas.
Se puede especificar mediante el atributo TYPE de la etiqueta que marca el inicio de lista. Los
posibles valores de este atributo varían según el tipo de lista que se este usando:
¾ <UL>: Sus posibles valores son: disc, circle o square.
¾ <OL>: Sus posibles valores son:
9 “A”: Letras mayúsculas.

9 “a”: Letras minúsculas.
9 “I”: Números romanos en mayúsculas.
9 “i”: Números romanos en minúsculas.
9 “1” Números árabes.
Este atributo se puede aplicar también a la etiqueta <LI>, de forma que sólo cambie el icono
de un elemento.
También se puede controlar el número con el que empieza una lista numerada con el atributo
START de la etiqueta <OL>, incluso modificarlo a mitad de lista con el atributo VALUE de la
etiqueta <LI>, para saltar algunos valores que no se deseen.
5.- Tablas.
5.1.- Una tabla básica.
Las tablas se construyen a partir de tres etiquetas principales:
¾ <TABLE>, </TABLE> => Define el comienzo y fin de una tabla.

¾ <TR>, </TR> => Define una fila.
¾ <TD>, </TD> => Define una celda.
Como ejemplo se indica una tabla con una sola fila y una sola celda:
14
<HEAD>
<TITLE> Ejemplo de una tabla con una fila y una celda </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Mi nombre es: Paco</TD>
</TR>
</TABLE>
</BODY>
</HTML>
A continuación, se muestra otra tabla con dos filas y tres celdas por fila:
<HTML>
<HEAD>
<TITLE> Ejemplo de una tabla con tres filas y tres celdas </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Susana</TD>
<TD>Paloma</TD>
<TD>Estibaliz</TD>
</TR>
<TR>
<TD>Antonio</TD>
<TD>Alfonso</TD>
<TD>Carlos</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5.2.- Bordes.
Su nombre es BORDER y se le asigna un valor <TABLE BORDER=”valor”>
<TABLE BORDER=”2”>
<TR>
</TR>
</TABLE>
5.3.- Tamaño.
Para especificar el tamaño de una tabla se emplean los atributos WIDTH (ancho) y HEIGHT
(alto) de la etiqueta TABLE.
<TABLE BORDER=”2” WIDTH=”100” HEIGHT=”100”>

<TR>
</TR>
</TABLE>
O en porcentaje de la pantalla:
<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%”>

<TR>
15

</TR>
</TABLE>
Si a estos atributos no se les asigna valor, la tabla ajusta su tamaño al del contenido de las
celdas.
5.4.- Alineación.
Los datos de una celda pueden alinearse vertical y horizontalmente, para ello, se emplean los
atributos:
¾ ALIGN: Indica la alineación horizontal, es decir, la posición del dato en la celda. Sus
posibles valores son left (izquierda), right (derecha) y center (centro).
¾ VALIGN: indica la alineación vertical. Sus posibles valores son top (arriba), bottom (abajo)
y middle (medio).
Su aspecto es
<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%”>

<TR>
<TD ALIGN=”center” VALIGN=”middle”>Mi nombre es: Paco</TD>
</TR>
</TABLE>
5.5.- Tamaño de una celda.
Se puede especificar el ancho de cada celda con el atributo WIDTH, poniéndolo dentro de la
etiqueta <TD>).
Dos atributos que influyen directamente en el tamaño y el aspecto de la celda son:
¾ CELLPADDING: Indica la separación entre el borde de la celda y el contenido de la misma,

se expresa en puntos y su valor por defecto es 1.
¾ CELLSPACING: Indica la separación entre el borde de dos celdas, se expresa en puntos y

su valor por defecto es 2.
5.6.- Color.
Para indicar el color de fondo de una tabla se usa el atributo BGCOLOR, expresando el color en
formato RGB. Este atributo se puede aplicar a toda la tabla, a una celda o a una fila; también
se puede especificar varias veces en una tabla.
5.7.- Expandir celdas.
A continuación se verá cómo expandir celdas, de forma que una celda ocupe varias filas o
varias columnas. Para ello se usan los atributos:
¾ COLSPAN: Expande una celda a otras columnas, siempre hacia la derecha. El valor que se
le asigna a este atributo es el número de columnas de la tabla original que ocupará la
celda.
¾ ROWSPAN: Expande una celda a otras filas, siempre hacia abajo. Igual que antes, este
valor indica el número de celdas de filas que ocupará esta celda.
16
Por supuesto, el número de celdas debe reajustarse a la nueva distribución para evitar celdas
vacías.
5.8.- Secciones dentro de una tabla.
Se pueden marcar varias filas como la cabecera, cuerpo o pie de una tabla, para mostrar más
fácilmente la estructura de la misma. Para ello se emplean las etiquetas:
¾ <THEAD>, </THEAD>: Engloba la línea o las líneas que forman la cabecera de la tabla.
¾ <TBODY>, </TBODY>: Engloba la línea o las líneas que componen el cuerpo de la tabla.
¾ <TFOOT>, </TFOOT>: Engloba la línea o las líneas que forman el pie de la tabla.
¾ <CAPTION>, </CAPTION>: Permite asociar un texto descriptivo a la tabla.
<TABLE border=1 WIDTH="100%">

<CAPTION ALIGN="TOP">Tabla con THEAD, TFOOT y TBODY</CAPTION>
<THEAD ALIGN="center">
<TR>
<TD>Celda de cabecera</TD>
</TR>
<TR>
</TR>
</THEAD>
<TFOOT ALIGN="left">
<TR>
<TD>Celda de píe</TD>
</TR>
</TFOOT>
<TBODY ALIGN="right">
<TR>
<TD>Celda de cuerpo</TD>
</TR>
<TR>
</TR>
</TBODY>
<TBODY ALIGN="center">
<TR>
</TR>
<TR>
</TR>
</TBODY>
</TABLE>
17
5.9.- Combinación de las tablas con otras etiquetas.
Todo lo que se ha visto hasta ahora se puede combinar con las tablas: colores, tipos de
fuentes, aspecto del texto, incluir imágenes o enlaces. Para ello basta con aplicar las etiquetas
al contenido de la celda correspondiente y así obtener el efecto deseado.
5.10.- Tablas anidadas.
Una tabla puede contener a su vez tablas. Basta con sustituir el contenido de una celda y
poner en su lugar una tabla, que tendrá su etiqueta TABLE, sus filas y sus celdas.
5.11.- Distribución del espacio.
Uno de los usos principales de las tablas en HTML sirve para obtener una buena distribución
del espacio de una página, de forma que ésta quede bien organizada.
Este uso se debe a que no hay un modo sencillo en HTML de colocar los elementos de una
página Web, ya que se supone que este trabajo de maquetación corresponde al navegador.
Las tablas son de los pocos elementos de HTML que permiten especificar claramente sus
dimensiones, tanta de filas como de celdas, alinear vertical y horizontalmente su contenido, así
como especificar el espacio entre los contenidos de distintas celdas, por tanto, son muy
apropiadas para colocar con precisión los elementos de una página. Basta con colocar todos los
elementos dentro de celdas, especificar el valor para todos los atributos de la tabla y
desactivar los bordes.
6.- Formularios.
Los formularios tienen la misma utilidad que en la vida real, permiten recabar información del
usuario, sus datos personales, su opinión, le permiten hacer un pedido de discos o libros, etc.
Los formularios se construyen a partir de dos etiquetas básicas:
¾ <FORM> y </FORM>: Marcan el comienzo y fin de un formulario.

¾ <INPUT>: Es una entrada del formulario.
6.1.- Un formulario elemental.
<HTML>
<HEAD>
<TITLE> Ejemplo de formulario </TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT>
</FORM>
</BODY>
</HTML>
6.1.1.- Atributos de un formulario.
¾ ACTION: Indica que hacer con los datos, se pueden mandar por correo electrónico,
mandarlo a una página, etc.
<FORM ACTION=”mailto:micorreo@dominio.es”>
18
¾ METHOD: Puede tomar dos valores: GET o POST. Especifica cómo se envía la información
al servidor. Con GET, la información se envía en el URL de la página, mientras que con
POST, va dentro de la petición HTTP.
<FORM ACTION=”mailto:micorreo@dominio.es” METHOD=”POST”>
¾ ENCTYPE: Específica cómo se codifica la información durante la transmisión.
• text/plain: Parejas con el nombre de la entrada y el valor tecleado por el usuario.
Nombre=Antonio
Apellidos=García Dopico
Login=dopico
• multipart/form-data: Cada dato viene en un apartado del correo. Dicho apartado tiene
como nombre el de la entrada y como contenido, el dato introducido por el usuario.
-----------------------------7d22eedd24
Content-Disposition: form-data; name=”Nombre”
Antonio
-----------------------------7d22eedd24
Content-Disposition: form-data; name=”Apellidos”
García Dopico
-----------------------------7d22eedd24
Content-Disposition: form-data; name=”Login”
dopico
-----------------------------7d22eedd24
• Sin especificar ENCTYPE: Usa su valor por defecto application/x-www-form-urlencoded,

que sustituye los espacios por “+” y los caracteres especiales por “%” seguidos por su
código ASCII.
Nombre=Antonio&Apellidos=Garc%EDa+Dopico&Login=dopico
6.2.- Entradas de texto.
Se indican con la etiqueta <INPUT>, asignando al atributo TYPE, el valor text.
Toda entrada debe identificarse con un nombre, por lo que siempre necesita tener el atributo
NAME, al que se le asigna como valor el nombre que identifica esta entrada.

<INPUT TYPE=”text” NAME=”direccion”>
</FORM>
Otros atributos son:
¾ NAME: Nombre con el que se identifica la entrada o dato.

¾ VALUE: Valor que toma la entrada o dato. Si se especifica o asigna un valor inicial, este
valor aparecerá por defecto en la caja de texto.
¾ SIZE: Tamaño de la caja de texto en caracteres.
¾ MAXLENGTH: Longitud máxima permitida para el texto de entrada en caracteres.
19
6.3.- Palabra clave (Password).
Este tipo de entradas se indican con TYPE=”password”, son análogas a las de texto, con la
diferencia de que no muestran en pantalla los caracteres tecleados.
Tienen los mismo atributos que las entradas de texto: NAME, VALUE, SIZE y MAXLENGTH.
6.4.- Botón de opción (Radio Button).
Se utiliza cuando hay unas cuantas opciones y se quiere que el usuario elija una entre ellas; se
emplean para hacer una pregunta al usuario, que admite varias respuestas posibles, y el
usuario sólo puede escoger una de ellas.
Se indican con el atributo TYPE=”radio”, cada opción tendrá una atributo VALUE distinto.
Hay un atributo adicional que permite marcar alguna opción como ya seleccionada: CHECKED.

<INPUT TYPE=”radio” NAME=”Segundo plato” VALUE=”Pollo”>Pollo asado
<INPUT TYPE=”radio” NAME=”Segundo plato” VALUE=”Filete” CHECKED>Filete
<INPUT TYPE=”radio” NAME=”Segundo plato” VALUE=”Trucha”>Trucha
</FORM>
6.5.- Casilla de opción (Check Box).
Es muy similar al botón de opción, pero permite marcar varios simultáneamente. Las
diferencias con los botones de opción surgen por su diferencia funcionalidad. Estas casillas se
emplean a modo de preguntas sencillas, cuya respuesta, sólo puede ser “si” o “no”. Se indican
poniendo como tipo TYPE=”checkbox”.
Igual que antes, cada casilla tendrá un texto descriptivo que ayudará al usuario a saber qué
está marcando y una pregunta global que describa esta sección del formulario.
También está el atributo CHECKED, que permite mostrar al usuario algunas opciones como ya
marcadas.

<INPUT TYPE=”checkbox” NAME=”Lechuga” VALUE=”no”>Lechuga
<INPUT TYPE=”checkbox” NAME=”Tomate” VALUE=”yes” CHECKED>Tomate
<INPUT TYPE=”checkbox” NAME=”Cebolla” VALUE=”no”>Cebolla
</FORM>
6.6.- Listas de selección (Pull Down List).
Emplea la etiqueta <SELECT> y su cierre </SELECT>, cada una de las opciones que se
mostrarán al desplegar la lista se indican con la etiqueta <OPTION>.
Tiene como atributo <SIZE> e indica cuántas opciones deben mostrarse.

<SELECT NAME=”Provincia”>
<OPTION VALUE=”Alicante” SELECTED>Alicante
<OPTION VALUE=”Aspe”>Aspe
<OPTION VALUE=”Alcoy”>Alcoy
<OPTION VALUE=”Elche”>Elche
</FORM>
20
6.7.- Área de texto (TextArea).
Esta entrada de formulario se utiliza para que el usuario pueda escribir un párrafo. Este tipo de
entrada se emplea para recoger opiniones o comentarios.
Se indica con la etiqueta <TEXAREA> y su cierre </TEXTAREA>. Los atributos son:
¾ NAME: Indica el nombre de la entrada.

¾ ROWS: Indica el número de filas.
¾ COLS: Indica el número de columnas.
¾ WRAP: Indica cómo se parten las líneas al llegar al final de la línea.
• WRAP=”off”: Valor por defecto. No parte la línea la llegar al final y el usuario sigue
tecleando en la misma línea. Envía el texto tal cual se tecleó.
• WRAP=”soft”: Al llegar al final del recuadro cambia de línea y se vuelve a poner al
principio. Manda el texto como se tecleó.
• WRAP=”hard”: Al llegar al final parte las líneas. Manda el texto como se ve en el
recuadro.
6.8.- Entrada oculta (Hidden).
Es un tipo de entrada especial. No muestra nada al usuario ni recoge ninguna información.
Se utiliza para diferenciar datos que provienen de formularios similares pero ubicados en
distintos sitios Web.
Emplea la etiqueta <INPUT> con una atributo TYPE=”hidden”. Además, tiene los dos atributos
básicos: NAME y VALUE.

<INPUT TYPE=”hidden” NAME=”Origen” VALUE=”Aspe”>
</FORM>
6.9.- Entrada archivo (File).
Éste es otro tipo especial de entrada. Permite al usuario enviar un archivo.
Su sintaxis también emplea la etiqueta <INPUT>, ahora con un atributo TYPE=”file”, junto a
un atributo NAME.
Al usar esta entrada, se debe cambiar la forma en que se manda el correo electrónico, para
mandar el archivo debe cambiarse el formato con que se envía la información.
<FORM ACTION=”mailto:micorreo@dominio.es” METHOD=”POST”

ENCTYPE=”multipart/form-data”>
<INPUT TYPE=”file” NAME=”foto”>
</FORM>
6.10.- Botón enviar (Submit).
Como su nombre indica, este botón envía los datos que componen el formulario que haya
introducido el usuario. Su sintaxis es similar a la de las primeras entradas de formulario vistas.
Emplea la etiqueta <INPUT> con un atributo TYPE=”submit”.
Este botón tiene un atributo VALUE que se emplea para cambiar el texto que aparece en el
botón.
21

<INPUT TYPE=”submit” VALUE=”Enviar”>
</FORM>
6.11.- Botón borrar (Reset).
Este botón es análogo al anterior. Como su nombre indica, borra todos los datos que haya
introducido el usuario, cargando los valores por defecto. Su sintaxis es similar y emplea la
etiqueta <INPUT> con el atributo TYPE=”reset”.
Cuando se da ese a este botón, se borran todos los datos del formulario. También tiene un
atributo VALUE que se emplea para cambiar el texto que aparece en el botón.

<INPUT TYPE=”reset” VALUE=”Borrar”>
</FORM>
6.12.- Imagen.
Se emplea para usar una imagen como botón de enviar, de forma que cuando se pulse sobre
dicha imagen se envíen los datos. Su utilidad es la misma que la del botón de enviar. Esta
entrada surge porque hay muchos formularios distribuidos por todos lados y con esta entrada
se evita dejar la leyenda del botón de enviar en un idioma concreto. La sintaxis se indica a
continuación:
Como puede verse, se usa un atributo TYPE=”image”. A continuación, se especifica la imagen

a usar con el atributo SRC y otros atributos propios de una imagen como ancho WIDTH, alto
HEIGHT, borde BORDER o texto alternativo ALT.

<INPUT TYPE=”image” SRC=”Enviar.gif” WIDTH=”94” HEIGHT=”26”
BORDER=”0” ALT=”Submit”>
</FORM>
6.13.- Organización de las entradas.
Las entradas se pueden agrupar para hacer más legible el formulario, para ello se emplea la
etiqueta <FIELDSET> y su cierre </FIELDSET>. Además, se puede asociar un texto descriptivo
al grupo para facilitar su comprensión, de modo que el usuario sepa qué datos se esperan. Se
consigue mediante la etiqueta <LEGEND> y su cierre </LEGEND>.
Ya se ha comentado que normalmente las entradas se suelen acompañar de un texto que

indica al usuario qué se espera que introduzca, pero dicho texto no está asociado con la
entrada. Para evitar que el navegador vea la entrada y el texto descriptivo como entes
independientes, se emplea la etiqueta <LABEL> y su cierre </LABEL>.

<FIELDSET>
<LEGEND>Datos Personales</LEGEND>
22
<LABEL>Nombre:<INPUT TYPE=”text” NAME=”nombre”></LABEL>

<LABEL>Apellidos:<INPUT TYPE=”text” NAME=”apellidos”></LABEL>
<LABEL>Dirección<INPUT TYPE=”text” NAME=”direccion”></LABEL>
<LABEL>Teléfono:<INPUT TYPE=”text” NAME=”telefono”></LABEL>
</FIELDSET>
<INPUT TYPE=”submit” VALUE=”Enviar”>
</FORM>
6.14.- Uso de formularios para enviar al usuario a otra página.
Basta cambiar la acción asociada al atributo ACTION para enviar al usuario a otra página. De
este modo, el formulario funcionaría como un enlace. Cuando se pulsa el botón de enviar,
siempre se ejecuta la acción asociada al formulario.
<FORM ACTION=”otra_pagina.asp”>
<INPUT TYPE=”submit” VALUE=”otra”>
</FORM>
7.- Marcos.
Los marcos se emplean para dividir la ventana del navegador en zonas o regiones autónomas
e independientes. De hecho, cada marco se comporta como una página HTML y tiene su propio
código fuente, por tanto, habrá un documento HTML por cada marco y luego uno global que
indicará cómo se realiza la división del espacio disponible en marcos.
7.1.- Una página sencilla con marcos.
Para indicar al navegador que la página contiene una serie de marcos, se usa la etiqueta
<FRAME> y su cierre </FRAME>. Esta etiqueta tiene como atributo principal COLS o ROWS,
para dividir la página en columnas o filas, respectivamente.
El valor que toman estas etiquetas son “n” números separados por comas que indican que la
página se divide en “n” marcos, tantos como números haya expresado en porcentajes o
puntos.
<FRAMESET COLS=”10%,20%,35%,10%,25%”>
...
</FRAMESET>
De modo similar, para cuatro filas, expresadas en puntos o pixels, sería:
<FRAMESET ROWS=”100,120,30,200”>
...
</FRAMESET>
Como el número de pixels o puntos de una pantalla cambia con la resolución, con un asterisco
(“*”).
<FRAMESET ROWS=”100,120,*”>
...
</FRAMESET>
Como cada usuario puede trabajar con una resolución distinta, no se sabe si un porcentaje de
esa resolución será suficiente para ver adecuadamente la información que se quiere mostrar,
por tanto, lo normal es trabajar con puntos, dejando siempre un solo comodín que absorba las
diferencias entre las distintas resoluciones posibles.
23
Además de repartir el espacio, en este archivo hay que definir el contenido de cada marco.
Para ello se emplea la etiqueta <FRAME>, cuyo atributo principal es SRC, que indica de dónde
obtener el archivo HTML que se cargará en ese marco.
<FRAME SRC=”marco1.html”>
<HTML> <HTML> <HTML> <HTML>

<HEAD> <HEAD> <HEAD> <HEAD>
<TITLE></TITLE> <TITLE></TITLE> <TITLE></TITLE> <TITLE></TITLE>
</HEAD> </HEAD> </HEAD> </HEAD>
<BODY> <BODY> <BODY> <BODY>
Marco número 1 Marco número 2 Marco número 3 Marco número 4
</BODY> </BODY> </BODY> </BODY>
</HTML> </HTML> </HTML> </HTML>
<HTML>
<HEAD>
<TITLE>Página con marcos</TITLE>
</HEAD>
<FRAMESET COLS=”100,120, 120,*”>
</FRAMESET>
</HTML>
7.2.- Navegadores que no soportan marcos.
Los navegadores más elementales o antiguos no soportan marcos. Para evitar que no se vea
nada hay que especificar la etiqueta <NOFRAMES> y su cierre </NOFRAMES>.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=”100,120, 120,*”>
</FRAMESET>
<NOFRAMES>
<BODY>
<P>
USTED NECESITA UN NAVEGADOR QUE SOPORTE MARCOS, DISCUPE LAS
MOLESTIAS.
</P>
</BODY>
</NOFRAMES>
</HTML>
7.3.- Anidación de marcos.
Se puede anidar marcos, es decir, se divide un marco a su vez en más marcos. Por ejemplo,
se puede dividir una página en tres columnas y la última de ellas se puede dividir a su vez en
tres filas. Para ello, el último <FRAME> se sustituye por un <FRAMESET>, que llevará
asociado una etiqueta de cierre, y entre ambas etiquetas, los nuevos marcos. Los atributos del
<FRAMESET> indicarán si la nueva división está hecha en columnas o filas, y el espacio que se
dedica a cada marco.
24
7.4.- Imágenes dentro de un marco.
Se puede cargar una imagen en un marco. Basta con indicar un archivo gráfico con la imagen
a cargar en vez de un archivo HTML. Por tanto, el aspecto tendrá el marco es el siguiente:
<FRAME SRC=”imagen.gif”>
Algo bastante habitual es dejar el marco del tamaño de la imagen, para así aprovechar mejor
el espacio. Por otra parte, se obtiene mejor resultado, al no tener tantos bordes alrededor de
la imagen.
7.5.- Atributos de los marcos.
¾ SCROLLING: Especifica si se desean o no barras de desplazamiento en un marco, puede

tomar tres valores: siempre aparece (yes), nunca aparecen (no) y aparecen sólo cuando
hacen falta (auto).
¾ MARINWIDTH: Establece el margen del marco a lo ancho.
¾ MARGINHEIGHT: Establece el margen del marco a lo alto.
¾ BORDER: Ancho en puntos del borde del marco. Si no se desea borde debe ponerse a cero.
¾ BORDERCOLOR: Color del borde, expresado en RGB.
¾ FRAMEBORDER: Indica si se muestra o no el borde, por lo que sus posibles valores son yes
o no. El borde puede tener un ancho concreto, pero no mostrarse, está pero no se ve.
¾ NORESIZE: Se utiliza para evitar que el usuario cambia el tamaño a un marco.
¾ NAME: La da nombre al marco.
<FRAME SRC=”marco1.html” SCROLLING=”valor” MARGINWIDTH=”número”

MARGINHEIGHT=”número” BORDER=”número” BORDERCOLOR=”color”
FRAMEBORDER=”valor” NAME=”marco1” NORESIZE>
7.6.- Enlaces y marcos.
Si se quiere dar la opción de cargar una nueva página en un marco, basta con poner el enlace
HTML correspondiente en el código del marco.
En este caso, si se pincha en el enlace, se carga la página en el marco actual. Para que no
pase esto y se cargue en un marco vecino, se añadirá el atributo TARGET al enlace (etiqueta
<A>).
Además, debe asignarse un nombre a cada marco, para así reverenciarlos luego. Esto se hace
en el archivo que establece la división del espacio entre los distintos marcos, mediante el
atributo NAME.
MARCOS.HTML
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=”100,120>
<FRAME SRC=”marco1.html” NAME=”derecha”>
<FRAME SRC=”marco2.html” NAME=”izquierda”>
</FRAMESET>
</HTML>
MARCO1.HTML
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
25
<A HREF=”http://www.netscape.com” TARGET=”izquierda”>Netscape</A>

</BODY>
</HTML>
MARCO2.HTML
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Las propiedades del atributo TARGET son:
¾ _top: Marca como destino toda la ventana del navegador.

¾ _blank: Marca como destino una nueva ventana del navegador.
¾ _self: Marca como destino el marco actual, es la opción por defecto.
¾ _parent: Marca como destino en el espacio organizado por el <FRAMESET>.
8.- Capas.
Los principales atributos de la etiqueta <DIV> son:
¾ TOP (Arriba): Define la posición absoluta o relativa de la capa, indicando el desplazamiento

desde arriba en puntos. Este desplazamiento puede ser positivo o negativo.
¾ LEFT (Izquierda): define la posición absoluta o relativa de la capa, indicando el
desplazamiento desde la izquierda en puntos. Este desplazamiento puede ser positivo o
negativo.
¾ POSITION (Posicionamiento): Tiene dos valores: posición absoluta (absolute), o posición
relativa (relative). Si es absoluta, los valores de TOP y LEFT se toman desde la esquina
superior izquierda, obteniendo la posición final de la capa. Si es relativa, los valores de TOP
y LEFT se toman a partir del último elemento que se haya colocado en la página.
¾ VISIBILITY (Visibilidad): Especifica si la capa es visible o no. Permite mostrar u ocultar
información sin interactuar con el servidor, de forma local. Sus valores pueden ser oculta
(hidden) o visible (visible).
¾ ABOVE (Arriba): Indica la posición relativa entre capas.
¾ BELOW (Abajo): Indica la posición relativa entre capas.
¾ Z-INDEX (Índice): Número que indica la posición absoluta que ocupa esta capa. Cuanto
mayor sea el número, más arriba estará esta capa y cuanto menor sea, estará más abajo.
<html>
<head>
<title>Página con capas</title>
</head>
<body>
<p>antes ponemos un párrafo</p>
<div style="position:absolute; left:20px; top:50px; z-index:3 ">
<h1><font color="red">INTRODUCCIÓN A CAPAS</font></h1>
</div>
</div>
</div>
</body>
</html>
26
9.- Hojas de estilo (CSS, Cascading Style Sheets).

9.1.- Estilo aplicado a unas etiquetas concretas.
9.1.1.- El atributo STYLE
Permite especificar una serie de características del elemento (definidas en la siguiente sección)
dentro de su etiqueta de apertura. La sintaxis es:
<etiqueta style=”carac1: valor; carac2: valor; . . . .”>
<BODY>
<P> Este es un parrafo normal, sin margenes y en color negro </P>
<P style=”margin-left: 1cm; color: blue”> Este es un parrafo con un
margen izquierdo de 1 cm. y de color azul </P>
</BODY>
9.1.2.- El elemento <SPAN>
Se emplea para especificar el estilo de un elemento de menor longitud como una palabra o una
letra dentro de un párrafo.
<BODY>
<P> Este es un parrafo que tiene una
<SPAN style=”font-size: 16pt; color: blue”> palabra </SPAN> con un
tamaño de fuente de dieciseis de altura y de color azul </P>
</BODY>
9.2.- Definición global del estilo en un documento HTML.
Permite definir en la cabeza del documento HTML formatos de estilo para los elementos del
documento, pudiendo incluirse tantos elementos STYLE como se desee. De esta forma, este
elemento pude especificar el formato de todos los elementos de un determinado tipo en un
documento o de todos los elementos que cumplan una condición o que incluyan un
determinado atributo en su etiqueta.
La sintaxis es
<STYLE type =”text/css”>

[instrucciones del estilo]
</STYLE>
Otros atributos que también pueden emplearse con la etiqueta STYLE son type, media, lang
y dir. El atributo type específica el formato de codificación de la hoja de estilo. Normalmente,
su valor es text/css.
<STYLE type=”text/css”>
H1 {text-aling: center; font-size: 16pt; color:red}
H2 {text-aling: left; font-size: 14pt; color:blue; margin-left: 1cm}
P {text-aling: left; font-size: 12pt; color:black}
</STYLE>
</HEAD>
<BODY>
<H1> El sabueso de Baskerville</H1>
<H2> I. El señor Sherlock Holmes </H2>
<P> sñor Sherlock Holmes, que de ordinario se levantaba muy
tarde...
</BODY>
27
9.3.- Inclusión de hojas de estilo.
Si se tienen muchas páginas hay que hacer cambios en muchos sitios. Entonces, lo que se
hace es salvar el bloque contenido en <STYLE> como un archivo de definición de estilo
(extensión “css”) y luego se establece un enlace en cada página.
miestilo.css
Menú.html
<HTML>
<HEAD>
<TITLE> Pagina con estilo </TITLE>
<LINK REL = “stylesheet” HREF= “miestilo.css” TYPE=”text/css”>
</HEAD>
La etiqueta <LINK> se emplea para enlazar dos documentos. Con el atributo HREF se
especifica el URL del documento externo. Mediante el atributo REL se especifica la relación
entre los documentos, al asignarle stylesheet se indica que uno es la hoja de estilo del otro.
Con el atributo TYPE se especifica el tipo de documento que se enlaza, en este caso es texto.
9.4.- Estilos mediante clases.
Se puede necesitar más de un tipo de párrafo asociado a la misma etiqueta, por ejemplo se
puede necesitar cabeceras de nivel 2 en rojo y verde. Para solucionarlo, se puede definir la
etiqueta <H2>, tantas veces como variantes se quieran usar. Cada una va seguida de un
punto y del nombre que se le va a dar a esa clase.
H2 .rojo {font-size: 12pt; font-weight: bold; color:red}
H2 .verde {font-size: 12pt; font-weight: bold; color:green}
</STYLE>
Se podrá utilizar, según convenga, una de estas variantes con sólo hacer referencia a su clase:
<H2 CLASS=rojo> El sabueso de Baskerville</H2>

<H2 CLASS=verde> I. El señor Sherlock Holmes </H2>
Incluso se puede definir una clase genérica para todas las etiquetas, que modifique alguna o
algunas de sus características:
<STYLE>
.rojo {color:red}
</STYLE>
Esta clase no está asociada a ninguna etiqueta en concreto.
<H1 CLASS=rojo> El sabueso de Baskerville</H1>

<H2 CLASS=rojo> I. El señor Sherlock Holmes </H2>
Como se puede apreciar, este mecanismo da una flexibilidad aún mayor para obtener la
apariencia deseada con un mínimo esfuerzo.
28
9.5.- Precauciones a tomar para antiguos navegadores.
Si se incluye un bloque de estilo, en la cabecera de la página, pueden surgir problemas con los
navegadores que no soportan hojas de estilo.
Algunos navegadores que no implementan las hojas de estilo se limitan a ignorar las etiquetas
<STYLE> y </STYLE>, pero otros muestran como parte de la página las instrucciones del
bloque de definición del estilo.
Para evitar esto, es conveniente poner dicho bloque de información dentro de un comentario,
entre los símbolos <! -- y -- >. Los navegadores ignoran los símbolos de comentario, y los
antiguos creen que todo el bloque de estilo es un comentario y no presentan nada.
<HTML>
<HEAD>
<TITLE> PAGINA WEB CON ESTILO </TITLE>
<! - -
-->
</STYLE>
</HEAD>
<BODY>
<H1> El sabueso de Baskerville</H1>
<H2> I. El señor Sherlock Holmes </H2>
<P> sñor Sherlock Holmes, que de ordinario se levantaba muy
tarde...
</BODY>
</HTML>
9.6.- Propiedades de las hojas de estilo.
Características de los tipos de letras.
Características Descripción Tipos de valores Ejemplos

font-size Establece el tamaño de los caracteres de texto. puntos (pt) font-size:
pulgadas (in) 10pt
centímetros (cm) font-size:
pixels (px) 36px
font-family Establece el tipo de fuente del texto. Nombre de la fuente. font-family:
Pueden indicarse varias alternativas separadas Nombre de la familia Arial
por comas. de la fuente. font-family:
Arial,
Helvetica.
font-weight Establece el espesor de la fuente de texto extra-light font-weight:
light bold
demi-light
medium
demi-bold
bold
extra-bold
font-style Permite establecer el tipo de fuente cursiva normal font-style:
italic italic
line-height Establece la distancia de separación entre puntos (pt) line-height:
líneas de texto en valores absolutos o en pulgadas (in) 18pt
porcentaje del valor por defecto centímetros (cm) line-height:
pixels (px) 200%
porcentaje (%)
Características de las listas definibles.
29
list-style-type Establece el topo de la lista: disco circulo, disc list-style-type:

cuadrado, valor decimal, romana minúscula, circle decimal
romana mayúscula, letra minúscula, letra square
mayúscula o ninguna. decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
list-style-image Permite establecer una imagen que sustituye al url list-style-image:
topo por defecto. url (bola.gif)
list-style- Indica la alineación de los elementos de una inside list-style-position:
position lista con respecto al topo outside inside
Características de los tipos de letras.

line-height Establece la distancia de separación entre puntos (pt) line-height: 18pt
líneas de texto en valores absolutos o en pulgadas (in) line-height: 200%
porcentaje del valor por defecto centímetros (cm)
pixels (px)
porcentaje (%)
text-decoration Subraya (underline), pone en cursivas (italic) o none text-decoration:
tacha (line-through) un texto underline unerline
italic
line-through
text-align Establece la justificación del texto left text-aling: center
center
right
text-ident Establece la indentación o tabulación del texto puntos (pt) text-ident: 1cm
pulgadas (in)
centímetros (cm)
pixels (px)
word-spacing Establece un espaciado entre las palabras de un normal word-spacing:
texto puntos (pt) 16pt
pulgadas (in)
centímetros (cm)
pixels (px)
white-space Establece como se trata un espacio en blanco normal white-space: pre
en el texto: normal, como en el elemento PRE o pre
que no admita un salto nowrap
color Establece el color de la fuente de texto nombre del color color: black
mediante el nombre del color o su valor RGB valor rgb color:#000000
letter-spacing Establece un espaciado entre las letras de un normal letter-spacing:
texto puntos (pt) 6pt
pulgadas (in)
centímetros (cm)
pixels (px)
Características de los márgenes.

border-color Establece el color del borde del elemento. Por nombre del color border-color:
defecto, es el del elemento. valor rgb #0000ff
border-top- Establece el grosor del borde superior, inferior thin border-top-width:
widht izquierdo y derecho. médium thin
border-bottom- thick
width puntos (pt)
border-left- pulgadas (in)
width centímetros (cm)
border-wiright- pixels (px)
widht
border-style Establece el estilo de la línea de borde: ninguno none border-style:
de puntos, discontinua, sólida doble, marcada. dotted double
dashed
solid
double
groove
ridge
inset
outset
padding-top Establecen, respectivamente, un espaciado puntos (pt) padding-top: 10pt
padding-right superior, a la derecha, inferior y a la izquierda pulgadas (in) padding-bottom:
30
padding-bottom del elemento centímetros (cm) 36%

padding-left pixels (px)
porcentaje (%)
clear Establece si se permite elementos flotantes none clear: left
alrededor en ambos lados (none), a la left
izquierda, a la derecha o a ningún lado right
both
margin-left Establecen el margen izquierdo, derecho, puntos (pt) margin-left: 3cm
margin-right superior e inferior de la página o de un pulgadas (in) margin-right: 2cm
margin-top elemento centímetros (cm) margin-top: 2 cm
marging-bottom pixels (px) margin-bottom:
2cm
Características para la reconstrucción y visualización de elementos.

background Establece la imagen (URL) o el color del fondo url background:
(nombre del color o valor RGB) del elemento. nombre del color #11ff09
valor background:
url(#papel.gif)
vertical-aling Establece la alienación vertical de un elemento: baseline vertical-aling: sub
con la línea base, como subíndice, como sub
superíndice, línea superior de los elementos, super
línea superior del texto, centrado, línea inferior top
de los elementos, línea inferior del texto o en text-top
un valor porcentual con la altura de la línea. middle
bottom
text-bottom
porcentaje (%)
width Establece la anchura de un elemento. puntos (pt) width: 100px
pulgadas (in)
centímetros (cm)
pixels (px)
auto
height Establece, la altura de un elemento puntos (pt) height: 200pt
pulgadas (in)
centímetros (cm)
pixels (px)
auto
float Alineación del elemento con respecto al texto none flota: left
circundante. left
right
clear Establece si se permite elementos flotantes left clear: left
alrededor en ambos lados (none), a la right
izquierda, a la derecha o a ningún lado. none
display Establece como se reconstruye el elemento: block display: inline
como un bloque independiente, dentro de otro inline
o como un elemento de una lista. list-item
none
10.- Ejercicios
Ejercicio 1.
Abra el editor de texto y escriba dichas etiquetas (<HTML> y </HTML>) guardando dicho
archivo con el nombre primera_pagina.html; después ábralo con el navegador de Internet.
Ejercicio 2.
Abra con el editor de texto el archivo con el nombre primera_pagina.html, modifíquelo con
el ejemplo de arriba, guárdelo y después ábralo con el navegador de Internet.
Ejercicio 3.
Cree con el editor de texto el archivo con el nombre texto.html, cuyo texto será:
El texto puede estar en negrita, itálica o subrayado, incluso en negrita, itálica y

subrayado
31
Guárdelo y después ábralo con el navegador de Internet.
Ejercicio 4.
Cree con el editor de texto el archivo con el nombre fuente.html, cuyo contenido será el
siguiente:
El texto tendrá dos o más líneas, la primera mitad en ARIAL, la siguiente en COURIER NEW.
Ponga tres tamaños de 2, 4 y 6. Incluya una palabra de tamaño 2 de color ROJO, alineada a
la izquierda en itálica y otra alineada a la derecha de tamaño 6 en verde, en itálica, centrada
y con subrayado.
Guárdelo y después ábralo con el navegador de Internet.
Ejercicio 5.
Cargue una imagen especifique el alto y ancho de la misma, y modifique estos valores para
ver cómo cambia la figura. Añádale el atributo ALT, active la opción de no cargar imágenes
en el navegador y vea cómo queda. Ponga algo de texto alrededor de la imagen y pruebe los
distintos valores del atributo ALIGN. Por último, a partir de una imagen de un punto
construya líneas de distintos grosores.
Ejercicio 6.
Haga un enlace de texto a Microsoft, sálvelo y vea su aspecto en un navegador; pinché

sobre el enlace para ver su funcionamiento. Sustituya el texto por una imagen, luego,
suprima la línea azul que aparece y vea cómo queda. Ahora haga que apunte a un archivo
HTML local, que esté en su máquina.
Ejercicio 7.
Haga una lista de la compra con una lista no numerada.
Lista de la compra:
• Lechuga.
• Filetes de pollo.
• Manzanas.
• Queso de oveja.
Ejercicio 8.
Haga una receta de cocina con una lista numerada.
Lista de la compra:
1. Hacer la masa y dejarla reposar.

2. Pelar, lavar y cortar las manzanas.
3. Estirar la masa sobre la bandeja.
4. Colocar encima las manzanas y añadir mermelada.
5. Meter al horno hasta que se haga.
Ejercicio 9.
32
Haga una lista de definiciones según el patrón.
• Aserción: afirmación de alguna cosa.

• Aserradero: sitio donde sierran la madera, piedra u otra cosa.
Ejercicio 10.
Cambie el icono de la lista no numerada antes realizada y pruebe con los tres tipos para ver su
aspecto.
Cambie el icono de la lista numerada antes realizada y pruebe con los cincos tipos para ver su
aspecto.
Ponga un icono distinto para cada elemento de las listas anteriormente definidas.
Haga que la lista numerada anterior empiece en 5 y que a mitad de lista salte varios números
entre dos elementos.
Ejercicio 11.
Pruebe a poner distintos bordes a una tabla: 1,3,10,25 y por último o. ¿Cuál es el valor por
defecto del atributo BORDER?
Escriba en una tabla con una única celda su nombre y apellidos y vea el resultado. ¿Cuál es su
tamaño?
Añada ahora atributos de tamaño, primero en puntos: ancho 300 puntos y alto 100 puntos, y
vea el resultado; luego en porcentaje: ancho 100% y alto 100% y vea cómo queda; por
último, pruebe con ancho 50% y alto 50%.
Ejercicio 12.
A partir de la tabla anterior defina un con una fila y dos celdas, con ancho de 300 puntos. En
las celdas ponga dos nombres distintos. ¿Cómo se ve dicha tabla?
Ahora use el atributo WIDTH para definir el ancho de cada celda, primero, hágalas iguales,
expresando el valor en puntos, luego haga lo mismo expresando el valor en porcentaje.
Use este atributo para que la primera celda ocupe dos tercios y la segunda un tercio.
Ejercicio 13.
A partir de la tabla anterior, defina una con dos filas y tres celdas por fila. Ponga seis nombres
cualesquiera. En la primera fila asigne el ancho de cada celda como de 40%, 40% y 20% del
total de la tabla. Al ver la tabla ¿Cómo se ve la segunda fila?
Ahora suprima una de las celdas de la segunda fila ¿Qué sucede? ¿Cómo lo solucionaría?
Ejercicio 14.
A partir de una tabla anterior, defina una con seis celdas, repartidas en dos filas. En cada celda
ponga un nombre. No hace falta que indique tamaño o alineamiento, sólo ponga un borde, por
ejemplo, de 3. Vea cómo queda. Recuerde que al no indicar nada está trabajando con los
valores por defecto.
Ahora ponga una separación entre celda y contenido de 10 puntos, y vea cómo queda.
33
Quite el atributo anterior y ponga una separación entre celdas de 10 puntos. Vuelva a cargar la
tabla.
Ahora ponga ambos atributos a 10 puntos y vea el resultado.
Ahora ponga estos atributos a 0 puntos y vea el resultado.
Ejercicio 15.
En la tabla de antes, sin más atributos que los bordes, defina un color rojo para la tabla, un
color verde para la primera fila y un color azul para las celdas (1,2) y (2,3). Vea cómo queda.
Ejercicio 16.
Genere la siguiente tabla que contiene el horario comercial de una tienda de

electrodomésticos, con las siguientes características:
1. La tabla estará centrada respecto de la página.
2. El grosor del borde de la tabla será de 3.
3. El espacio de separación entre celdas será de 5.
4. El espacio de separación entre el borde de la celda y su contenido será de 10.
5. El fondo de la página será de color gris medio (#CDCDCD).
6. El fondo de la celda donde esta el logotipo será de color gris oscuro (#545454).
7. El fondo de las celdas laborables y sábado será de color gris medio (#CDCDD).
8. El fondo de las celdas domingo y cerrado será de color amarillo (#FFFF00).
9. El fondo de las celdas mañanas, tardes y horario intensivo, y del anuncio de día de fiesta
será de color blanco (#FFFFFF).
10. El fondo de la fila invierno y verano será de color gris medio (#CDCDD).
Ejercicio 17.
Genere en una tabla el horario escolar de este año, dando a cada asignatura un color y a las
horas de recreo otro.
Ejercicio 18.
34
En la tabla anterior de seis celdas sustituya una por una tabla con dos elementos. Ponga como
atributos sólo el borde, para así reconocer más fácilmente lo que está pasando.
Ejercicio 19.
Haga una tabla para poner en el centro de la página, más o menos, la imagen de una tarta de
manzana junto a su lista de ingredientes y su elaboración.
Ejercicio 20.
Cree una página que se llame turismo.html y modifica la tabla para que muestre este aspecto:
Ejercicio 21.
Hacer una tabla que sea un tablero de ajedrez con sus fichas.
35
Ejercicio 22.
Haga un formulario en la página del ejercicio anterior con una entrada de texto. Pida el
nombre del usuario, ponga como valor por defecto “Aquí su nombre”, ponga un tamaño grande
de caja de 40 y una longitud de texto máxima de 30.
Ejercicio 23.
Defina una entrada de tipo password a partir del formulario anterior.
Ejercicio 24.
Cree una página con un área de texto, especifique su tamaño, expresado en 6 filas y 50
columnas.
Ejercicio 25.
Haga una página con un botón de enviar y vea qué aspecto tiene. Pruebe a enviar un mensaje
a una cuenta de correo suya para ver qué aspecto tiene la información que manda un
formulario.
Ejercicio 26.
Haga una página con un botón de borrar y vea qué aspecto tiene. Teclee algo y pruebe qué
sucede al pinchar el botón de Reset.
Ejercicio 27.
Cree un archivo “marcos.html” con dos columnas, la mitad para cada marco y vea cómo
queda.
Ahora divida la página en cuatro columnas, repartiendo el espacio en partes iguales, y cargue
en cada marco uno de los archivos. Vea cómo queda.
Ahora asigne a los marcos espacios distintos: 10%, 20%, 30%, 40%.
36
Cambie la página para expresar el espacio en puntos, en vez de en porcentajes, por ejemplo=
50, 100, 200 y el resto. Vea cómo queda. Varíe levemente esta distribución para ajustarla a
50, 100 * y 2*. Vea el resultado.
Convierta las columnas en filas y vea el resultado.
Ejercicio 28.
A partir del ejercicio anterior, construya una página dividida en tres filas, donde la segunda fila
se divida en dos columnas y la tercera en tres columnas. Haga una distribución uniforme del
espacio. En la primera fila cargue el archivo “marco1.html”, en la segunda cargue dos veces el
archivo “marco2.html” y en la tercera, tres veces el archivo “marco3.html”. vea cómo que la
página.
Ejercicio 29.
Cargue una imagen en la segunda fila, primera columna del ejercicio anterior.
Ejercicio 30.
Cargue en un marco un archivo grande, suprima las barras de desplazamiento y vea cómo
queda.
Ponga márgenes generosos a un marco: primero 50 puntos para cada margen y vea cómo
queda, luego déjalos a 1, que es el mínimo posible.
Pruebe a poner bordes de color verde de 20 puntos para ver cómo queda. Ahora, sin modificar
el borde, haga que no se vea. Por último, ponga los bordes a cero.
Añada el atributo NORESIZE y vea cómo se comporta ahora el marco.
Ejercicio 31.
Generar una página que contenga los siguientes marcos:
Marco 1: Se llamara MENU.HTML y tendrá los enlaces de las practicas realizadas por ahora.
Marco 2: Será donde se visualizaran todas las practicas.
Ejercicio 32.
Definir una pequeña Web del curso, con las siguientes características:
ARRIBA.HTML: Contendrá una imagen pasada por el profesor.

MENU.HTML: Contendrá un pequeño menú donde aparecerán las asignaturas que tenéis en el
curso.
CONTENIDO.HTLM: Se visualizara una pequeña explicación de cada asignatura.
Ejercicio 32.
37

Temario Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Temario Web

Cargado por

Copyright:

Formatos disponibles

Francisco Herenas Ramos

I.E.S. Número 2 de Aspe

Es un sistema hipermedia de información que aprovecha los recursos de Internet y que

Es un formato que incluye texto, sonido, imágenes, vídeo, etc.

¾ URL (Uniform Resource Locator)

Es el sistema de identificación de recursos en el sistema WWW. Un recurso puede ser un

Protocolo específico de WWW para la transmisión de documentos de hipertexto.

Protocolos o conjuntos de normas que definen la transmisión de datos en la red Internet

2.- Los navegadores.

4.- Elementos básicos para construir un documento HTML.

4.1.- La página HTML mínima.

• <HTML> => Aquí empieza un documento HTML.

En la cabecera suele ponerse el título, mediante la etiqueta <TITLE> y su cierre </TITLE>.

4.2.- Cómo dar formato al texto.

¾ Negrita (bold) => Se emplea la etiqueta <B> y su cierre </B>.

¾ Itálica (italic) => Se emplea la etiqueta <I> y su cierre </I>.

¾ Subrayado (underline) => Se emplea la etiqueta <U> y su cierre </U>.

¾ Texto destacado (emphasis) => Se emplea la etiqueta <EM> y su cierre </EM>.

<B>Hola.</B> <I>Ésta</I> <U>es</U> <EM>mi</EM> primera página

¾ Texto muy destacado (strong emphasis) => Se emplea la etiqueta <STRONG> y su

¾ Subíndice => Se emplea la etiqueta <SUB> y su cierre </SUB>

¾ Superíndice => Se emplea la etiqueta <SUP> y su cierre </SUP>

<B><I><U>Hola. Como esta </U></I></B>

en una sola línea.

<P ALIGN =”justify”>Justificado</P>

4.2.1.- Caracteres especiales.

El blanco o espacio, es un carácter especial y la única forma de introducir unos se hace

Símbolo Representación Símbolo Representación

4.2.2.- Texto preformateado.

Como no se quiera que el navegador modifique el aspecto de un párrafo, porque ya tiene el

4.2.4.- Líneas horizontales.

<BODY BACKGROUND=”aguas.gif” BGPROPERTIES=”FIXED”>

“TABLAS” no es un enlace que se puede pinchar, simplemente se ha identificado como posible

El archivo y el nombre se separan por el carácter “#”.

Para implementar este comportamiento se divide la imagen en zonas y a cada zona se le

¾ SHAPE => Indica la forma del área a definir. Puede ser:

 Un rectángulo (RECTANGLE, RECT).

¾ COORDS => Coordenadas. Varían según el área especificada.

 Si es un rectángulo se especifica la esquina superior izquierda (x1,y1) y la esquina

A continuación hay un ejemplo de mapa, con un triángulo, un cuadrado y un círculo

4.6.1.- Listas no numeradas.

<UL></UL> => Comienzo y fin de una lista no numerada.

4.6.2.- Listas numeradas.

Estas listas, son una sucesión de elementos numerados:

<OL></OL> => Comienzo y fin de una lista numerada.

4.6.3.- Listas de definiciones.

Estas listas, se emplean para definir términos:

<UL></UL> => Comienzo y fin de una lista de definiciones.

4.6.4.- Atributos de las listas.

¾ <UL>: Sus posibles valores son: disc, circle o square.

¾ <OL>: Sus posibles valores son:

9 “A”: Letras mayúsculas.

5.1.- Una tabla básica.

Las tablas se construyen a partir de tres etiquetas principales:

¾ <TABLE>, </TABLE> => Define el comienzo y fin de una tabla.

Su nombre es BORDER y se le asigna un valor <TABLE BORDER=”valor”>

<TABLE BORDER=”2” WIDTH=”100” HEIGHT=”100”>

<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%”>

<TD>Mi nombre es: Paco</TD>

<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%”>

5.5.- Tamaño de una celda.

Dos atributos que influyen directamente en el tamaño y el aspecto de la celda son:

¾ CELLPADDING: Indica la separación entre el borde de la celda y el contenido de la misma,

¾ CELLSPACING: Indica la separación entre el borde de dos celdas, se expresa en puntos y

Un rectángulo (RECTANGLE, RECT).

Si es un rectángulo se especifica la esquina superior izquierda (x1,y1) y la esquina