Manual Diseño y Creacion de P Web Ok

Diseo y creacin de paginas web
Instituto de Capacitacin de la Industria de la Construccin
Diseo y creacin de
paginas web
Con Dreamweaver
M. T. C. Adalberto Torres Gamas
Diseo con Dreamweaver
Pg. 1
OBJETIVO GENERAL DEL CURSO

Al finalizar el curso el participante ser capaz de disear y crear de forma prctica una pgina
web esttica mediante los estndares del lenguaje HTML utilizando para su ayuda la aplicacin
Dreamweaver de la suite de adobe.
Pg. 2

NDICE
Contenido
OBJETIVO GENERAL DEL CURSO.................................................................................................... 2
NDICE............................................................................................................................................ 3
UNIDAD 1.
PRINCIPIOS BSICOS DE INTERNET ....................................................................... 7
1.1.
LNEA DE TIEMPO .......................................................................................................... 8
1.2.
RED DE COMPUTADORAS.............................................................................................. 9
LAN (Local rea Network): Red de rea Local. ................................................................... 10

MAN (Metropolitan rea Network): Red de rea Metropolitana. ..................................... 10
WAN (Wide rea Network): Red de rea Amplia. .............................................................. 10
1.3.
INTERNET..................................................................................................................... 11
LA WEB ................................................................................................................................ 11
SERVIDOR ............................................................................................................................ 11
DIRECCIONES DE INTERNET................................................................................................. 14
URL: ..................................................................................................................................... 14
DOMINIOS ........................................................................................................................... 14
SUBDOMINIO: ..................................................................................................................... 15
DIRECCIN IP: ...................................................................................................................... 15
ENLACE: ............................................................................................................................... 16
ALOJAMIENTO: .................................................................................................................... 16
ADMINISTRACIN: .............................................................................................................. 17
PROVEEDORES DE SERVICIOS DE INTERNET: ...................................................................... 17
1.4.
NAVEGADOR DE INTERNET ......................................................................................... 17
UNIDAD 2.
FUNDAMENTOS DE HTML ................................................................................... 19
2.1.
QU ES HTML .............................................................................................................. 20
2.2.
ORGENES DEL HTML ................................................................................................... 20
2.3.
VERSIONES DE HTML ................................................................................................... 21
2.4.
QUE SE NECESITA PARA PROGRAMAR HTML :............................................................ 22
2.5.
LO QUE NO SE REQUIERE PARA PROGRAMAR HTML ................................................. 22
2.6.
CONSEJOS .................................................................................................................... 22
2.7.
LA ESTRUCTURA BSICA HTML ................................................................................... 23
UNA PGINA BSICA ........................................................................................................... 23

Pg. 3

CONSIDERACIONES SOBRE EL TEXTO .................................................................................. 24
EJEMPLO PRCTICO............................................................................................................. 24
UNIDAD 3.
ELEMENTOS Y ETIQUETAS HTML......................................................................... 26
3.1.
MI PRIMER DOCUMENTO HTML. ................................................................................ 27
3.2.
CARACTERSTICAS GENERALES DEL LENGUAJE HTML.. ............................................... 27
Marcas y atributos............................................................................................................... 27
Concatenacin de marcas. .................................................................................................. 28
3.3.
CUATRO NORMAS FUNDAMENTALES ......................................................................... 29
HTML es simplemente texto ............................................................................................... 29

Igualdad de maysculas y minsculas................................................................................. 29
No importan los tabuladores, ni los saltos de lnea ............................................................ 29
Caracteres especiales .......................................................................................................... 29
3.4.
ESTRUCTURA DE UN DOCUMENTO HTML. ................................................................. 30
3.5.
COMANDOS BSICOS DE HTML .................................................................................. 31
Definicin de prrafos: P ..................................................................................................... 31

Ruptura de lneas: BR. ......................................................................................................... 31
Ttulos de encabezadoso ..................................................................................................... 32
3.6.
DANDO ESTILO AL TEXTO ............................................................................................ 32
Tipos de letras ..................................................................................................................... 32

Tamao del texto. ............................................................................................................... 32
Colores del texto. ................................................................................................................ 34
Texto preformateado: PRE. ................................................................................................. 34
Centrando texto. ................................................................................................................. 35
Lneas horizontales. ............................................................................................................. 35
3.7.
LISTAS .......................................................................................................................... 35
Listas ordenadas: OL. .......................................................................................................... 35

Listas desordenadas: UL. ..................................................................................................... 36
Listas de definicin: DL. ....................................................................................................... 36
3.8.
COMENTARIOS NO VISIBLES EN LA PANTALLA ........................................................... 37
3.9.
ENLACES: A. ................................................................................................................. 38
Enlaces a otras zonas de la misma pgina .......................................................................... 39

Enlaces a otras pginas ....................................................................................................... 40
Enlaces a una zona de otra pgina ...................................................................................... 41
3.10.
IMGENES ............................................................................................................... 42
Pg. 4

Principales formatos grficos en Internet. .......................................................................... 42
Inclusin de imgenes ......................................................................................................... 43
3.11.
TABLAS..................................................................................................................... 46
Ttulo de la tabla. ................................................................................................................. 47

Bordes de la tabla. ............................................................................................................... 47
Cabeceras de filas y de columnas........................................................................................ 47
Tamao de la tabla. ............................................................................................................. 48
Justificacin de la tabla. ...................................................................................................... 48
Espacio dentro de las celdas. .............................................................................................. 48
Forma de las celdas individuales. ........................................................................................ 48
3.12.
EDITORES Y CONVERSORES ..................................................................................... 50
Editores ............................................................................................................................... 50
UNIDAD 4.
DISEO CON DREAMWEAVER ............................................................................. 52
4.1.
QU ES DREAMWEAVER 8........................................................................................... 53
4.2.
NOVEDADES DE DREAMWEAVER ................................................................................ 53
4.3.
EDITAR PGINAS WEB ................................................................................................. 53
4.4.
CMO TENER UNA PGINA EN INTERNET .................................................................. 54
4.5.
ARRANCAR Y CERRAR DREAMWEAVER 8 .................................................................... 55
4.6.
ABRIR Y GUARDAR DOCUMENTOS .............................................................................. 55
4.7.
MI PRIMERA PGINA ................................................................................................... 56
4.8.
LA PANTALLA INICIAL .................................................................................................. 57
La barra de ttulo ................................................................................................................. 57

La barra de mens ............................................................................................................... 57
La barra de herramientas estndar ..................................................................................... 57
La barra de herramientas de documento ........................................................................... 57
La barra de estado ............................................................................................................... 57
El inspector de Propiedades ................................................................................................ 58
La barra de herramientas Insertar o panel de objetos ....................................................... 58
4.9.
VISTAS DE UN DOCUMENTO ....................................................................................... 59
La vista Diseo ..................................................................................................................... 59

La vista Cdigo..................................................................................................................... 59
La vista Cdigo y Diseo ...................................................................................................... 59
UNIDAD 5.
5.1.
HOJAS DE ESTILOS ............................................................................................... 60
CONCEPTOS DE HOJAS DE ESTILOS ............................................................................. 61
Pg. 5

5.2.
CSS COMO NOVEDAD .................................................................................................. 61
5.3.
DNDE DEFINIR LAS HOJAS DE ESTILO ....................................................................... 61
5.4.
FORMAS DE DEFINIR LOS ESTILOS............................................................................... 62
Definindolos y aplicndolos para determinadas etiquetas en todo eldocumento: .......... 62

Vnculos de hojas de estilo externas ................................................................................... 63
5.5.
PARA FINALIZAR .......................................................................................................... 63
BIBLIOGRAFA. ............................................................................................................................. 64
Pg. 6
UNIDAD 1.
PRINCIPIOS BSICOS DE INTERNET
OBJETIVO: Al finalizar la presente unidad, el participante ser capaz de conocer e identificar

claramente los conceptos bsicos que anteceden al vocabulario requerido para el dominio del
diseo y creacion de pginas web.
Pg. 7

1.1. LNEA DE TIEMPO
FECHA
1957
1960s
1969
1971
1976
1982
1984
1988
1991
1992
1993
1994
1995
1998
2000
2002
EVENTO
URSS lanza el Sputnik, primer satlite artificial. Como respuesta, EEUU forma parte
de ARPA (Agencia de Proyectos de Investigacin Avanzada) dentro del DOD
(Departamento de Defensa). El principal objetivo de este proyecto fue establecer
un sistema de investigacin militar que pudiera resistir un ataque enemigo.
Surge una propuesta denominada Packet Switching Network. Esta propuesta
introduce el concepto de repartir la informacin en paquetes que se transmiten a
travs de la red. Si uno de estos paquetes se pierde en el camino, se puede enviar
otro paquete.
ARPANET fue comisionado por el DOD.
Ray Tomlinson inventa el programa de correo electrnico que le permite a los
usuarios enviar mensajes a travs de la red.
La reina de Inglaterra manda su primer correo electrnico.
Se establece la primera definicin del trmino Internet como un grupo de redes
conectadas por medio de TCP/IP (Protocolo de Control de Transmisin y Protocolo
de Internet).
Se introduce el Sistema de Dominio de Nombre (DNS) que le permite al usuario
escribir el nombre de un sitio (Ej. www.mpl.org) en vez de tener que memorizarse
una direccin de Protocolo de Internet (IP) numrico (Ej. 204.62.131.129).
Se desarrolla el Transmisor de Conversaciones por Internet que le permite a los
usuarios conversar en tiempo real.
La Universidad de Minnesota lanza Gopher y Tim Berners Lee desarrolla la WWW
que es lanzada por el laboratorio CERN.
La Universidad de Nevada lanza a Vernica, una herramienta gopher para explorar
el espacio; el Banco Mundial aparece en Internet; y se inventa la frase Navegar
por Internet.
Se lanza MOSAIC, el primer navegador de Internet (Marc Andressen y NCSA), la
Casa Blanca aparece en Internet (http://www.whitehouse.gov), y se crea una
cuenta de correo electrnico para el presidente de los Estados Unidos
(president@whitehouse.gov).
Dos candidatos al doctorado de la Universidad de Stanford desarrollaron Yahoo,
una herramienta de bsqueda parra Internet, y los clientes Pizza Hut pueden hacer
su pedido por Internet.
Se lanza la tecnologa de RealAudio, se empieza a ofrecer Internet para los hogares
por medio de un sistema de discado (Ej. America Online, CompuServe, and
Prodigy), y el navegador Netscape se hace pblico.
El servicio postal de los Estados Unidos empieza a ofrecerle a sus clientes la
posibilidad de comprar, bajar informacin de la Web, e imprimir estampillas.
El tamao estimativo de la Web alcanza el billn de pginas indexadas.
A partir de enero, el 58% de la poblacin de Estados Unidos (164.14 millones) usa
Internet. Mundialmente, hay 544.2 millones de usuarios.
Pg. 8

1.2. RED DE COMPUTADORAS
Es un conjunto de computadoras interconectadas entre s a travs de un medio de
comunicacin para compartir recursos.
RECURSOS: Pueden ser una impresora, informacin, programas de aplicacin, unidades de
disco, etc.
MEDIOS DE COMUNICACIN PARA INTERCONECTAR REDES: Son los medios por el cual se
enva informacin a travs de la red. stos pueden ser almbricos e inalmbricos.
Almbricos
Par trenzado
Cable Coaxial
Metlicos
Medios de
comunicacin
Electromagnticos
Radio Enlace
Microondas
Satlites
Inalmbricos
pticos
Fibra ptica
Lser
Infrarrojo
Clasificacin de los medios de comunicacin a travs de los cuales se pueden interconectar las redes
Radio Enlace
Par Trenzado
Cable Coaxial
Enlace Satelital
Microondas
Pg. 9

TIPOS DE REDES
Podemos clasificar las redes en tres tipos de acuerdo a su ubicacin geogrfica.
LAN (Local rea Network): Red de rea Local.
Se considera la red de computadoras ms pequea, interconecta un conjunto de
computadoras (dos o ms computadoras) dentro de un rea local especfica: oficina, edificio,
departamento, hogar, locales comerciales dentro de un mismo edificio o establecimiento.
MAN (Metropolitan rea Network): Red de rea Metropolitana.

Es un conjunto de redes LAN interconectadas entre s, para romper las barreras de
comunicacin entre una y otra ciudad o estado en un mismo pas.
LAN MONTERREY
LAN D.F.
WAN (Wide rea Network): Red de rea Amplia.
LAN
TABASCO
Es un conjunto de redes MAN interconectadas entre s para romper las barreras de

comunicacin entre pases o continentes.
Pg. 10

1.3. INTERNET
Una vez que ya tienes nociones de redes de computadoras, ahora se explica el concepto de
Internet que proviene de dos palabras unidas:
INTER: Palabra que hace referencia a la palabra internacional.
NET: Palabra en ingls que traducida al espaol es Red.
De esta manera definimos Internet de la siguiente manera: Red Internacional o a una red
WAN.
LA WEB
Esta palabra traducida al espaol significa Telaraa, lo cual, en trmino computacional es una
red redes de computadoras donde cada da se va extendiendo de
forma ilimitada. Todas las personas que se conectan a Internet, ya
son parte de la Web.
Los cibercaf, son un ejemplo clsico de integrantes de la Web, las
universidades, las tiendas de negocio, hospitales, etc., todas las
redes que tienen acceso a Internet o que publican algo a travs de
Internet, pertenecen a la Web en todo el mundo.
WWW: Proviene de las palabras World Wide Web que quiere decir Telaraa Amplia Mundial.
stas siglas son muy utilizadas en las direcciones de Internet, haciendo referencia a una pgina
o sitio Web.
SERVIDOR
Es un nodo que forma parte de una red, provee servicios a otros nodos denominados clientes.
Tambin se suele denominar con la palabra servidor a una aplicacin informtica o programa
que realiza algunas tareas en beneficio de otras aplicaciones llamadas clientes. Algunos
servicios habituales son los servicios de archivos, que permiten a los usuarios almacenar y
acceder a los archivos de una computadora y los servicios de aplicaciones, que realizan tareas
en beneficio directo del usuario final. Este es el significado original del trmino. Es posible que
un ordenador cumpla simultneamente las funciones de cliente y de servidor.
Una computadora en la que se ejecuta un programa que realiza alguna tarea en beneficio de
otras aplicaciones llamadas clientes, tanto si se trata de un ordenador central (mainframe), un
miniordenador, una computadora personal, una PDA o un sistema embebido; sin embargo,
Pg. 11

hay computadoras destinadas nicamente a proveer los servicios de estos programas: estos
son los servidores por antonomasia.
Ejemplo de un servidor del tipo rack. Un servidor no es necesariamente una mquina de ltima
generacin de grandes proporciones, no es necesariamente un superordenador; un servidor
puede ser desde una computadora vieja, hasta una mquina sumamente potente (ej.:
servidores web, bases de datos grandes, etc. Procesadores especiales y hasta varios terabytes
de memoria). Todo esto depende del uso que se le d al servidor. Si usted lo desea, puede
convertir al equipo desde el cual usted est leyendo esto en un servidor instalando un
programa que trabaje por la red y a la que los usuarios de su red ingresen a travs de un
programa de servidor web como Apache.
Por lo cual podemos llegar a la conclusin de que un servidor tambin puede ser un proceso
que entrega informacin o sirve a otro proceso. El modelo Cliente-servidor no necesariamente
implica tener dos ordenadores, ya que un proceso cliente puede solicitar algo como una
impresin a un proceso servidor en un mismo ordenador.
Tipos de servidores
En la siguiente lista hay algunos tipos comunes de servidores: es el que almacena varios tipos
de archivos y los distribuye a otros clientes en la red.
Servidor de impresiones: controla una o ms impresoras y acepta trabajos de impresin de
otros clientes de la red, poniendo en cola los trabajos de impresin (aunque tambin puede
cambiar la prioridad de las diferentes impresiones), y realizando la mayora o todas las otras
funciones que en un sitio de trabajo se realizara para lograr una tarea de impresin si la
impresora fuera conectada directamente con el puerto de impresora del sitio de trabajo.
Servidor de correo: almacena, enva, recibe, enruta y realiza otras operaciones relacionadas
con el correo electrnico para los clientes de la red.
Servidor de fax: almacena, enva, recibe, enruta y realiza otras funciones necesarias para la
transmisin, la recepcin y la distribucin apropiadas de los fax.
Servidor de la telefona: realiza funciones relacionadas con la telefona, como es la de
contestador automtico, realizando las funciones de un sistema interactivo para la respuesta
de la voz, almacenando los mensajes de voz, encaminando las llamadas y controlando tambin
la red o el Internet, p. ej., la entrada excesiva de la voz sobre IP (VoIP), etc.
Servidor proxy: realiza un cierto tipo de funciones a nombre de otros clientes en la red para
aumentar el funcionamiento de ciertas operaciones (p. ej., prefetching y depositar
documentos u otros datos que se soliciten muy frecuentemente), tambin proporciona
servicios de seguridad, o sea, incluye un cortafuegos. Permite administrar el acceso a internet
en una red de computadoras permitiendo o negando el acceso a diferentes sitios Web.
Pg. 12

Servidor del acceso remoto (RAS): controla las lneas de mdem de los monitores u otros
canales de comunicacin de la red para que las peticiones conecten con la red de una posicin
remota, responde llamadas telefnicas entrantes o reconoce la peticin de la red y realiza la
autentificacin necesaria y otros procedimientos necesarios para registrar a un usuario en la
red.
Servidor de uso: realiza la parte lgica de la informtica o del negocio de un uso del cliente,
aceptando las instrucciones para que se realicen las operaciones de un sitio de trabajo y
sirviendo los resultados a su vez al sitio de trabajo, mientras que el sitio de trabajo realiza la
interfaz operadora o la porcin del GUI del proceso (es decir, la lgica de la presentacin) que
se requiere para trabajar correctamente.
Servidor web: almacena documentos HTML, imgenes, archivos de texto, escrituras, y dems
material Web compuesto por datos (conocidos colectivamente como contenido), y distribuye
este contenido a clientes que la piden en la red.
Servidor de base de datos: provee servicios de base de datos a otros programas u otras
computadoras, como es definido por el modelo cliente-servidor. Tambin puede hacer
referencia a aquellas computadoras (servidores) dedicadas a ejecutar esos programas,
prestando el servicio.
Servidor de reserva: tiene el software de reserva de la red instalado y tiene cantidades
grandes de almacenamiento de la red en discos duros u otras formas del almacenamiento
(cinta, etc.) disponibles para que se utilice con el fin de asegurarse de que la prdida de un
servidor principal no afecte a la red. Esta tcnica tambin es denominada clustering.
Servidor de Seguridad: Tiene software especializado para detener intrusiones maliciosas,
normalmente tienen antivirus, antispyware, antimalware, adems de contar con cortafuegos
redundantes de diversos niveles y/o capas para evitar ataques, los servidores de seguridad
varan dependiendo de su utilizacin e importancia.
Sin embargo, de acuerdo al rol que asumen dentro de una red se dividen en:
Servidor dedicado: son aquellos que le dedican toda su potencia a administrar los recursos de
la red, es decir, a atender las solicitudes de procesamiento de los clientes.
Servidor no dedicado: son aquellos que no dedican toda su potencia a los clientes, sino
tambin pueden jugar el rol de estaciones de trabajo al procesar solicitudes de un usuario
local.
Pg. 13

DIRECCIONES DE INTERNET
Toda computadora que est conectada a Internet y que provee de este servicio a otras a
travs de una red se les llama, Servidor Web. Sobre ste, se encuentran alojados archivos de
informacin con un formato especfico, las cuales son llamadas pginas de Internet o sitios
Web y que se pueden compartir con otros usuarios mediante Internet.
Cada servidor tiene un nombre, el cual es irrepetible en toda la Internet. El nombre
corresponde a determinadas siglas o palabras relacionadas con la empresa. De sta forma, el
nombre de un Servidor Web tiene la siguiente estructura:
www.tvazteca.com
Servicio Web
Nombre del Servidor
Dominio
URL:
Se entiende por URL cualquier direccin en internet, ya sea accesible por HTML (http://etc.),
FTP(ftp://etc.), E-mail (usuario@maquina.dominio) o cualquier otro protocolo
DOMINIOS
Proviene de la palabra inglesa "domain" y hace referencia al entorno en el que est situada
una determinada mquina (ordenador). Puede constar de un nombre (generalmente el
nombre de la empresa u organizacin) y suele ir terminado por un indicador del pas(.es, .uk,
etc.) o del tipo de organizacin de que se trata.
Siete Principales Dominios
DOMINIO
arpa
mil
gob
net
edu
com
org
ORGANISMO
Red de Arpanet: La primera red de la defensa de los Estados Unidos
Organizaciones Militares
Organizaciones Gubernamentales
Empresas muy extendidas en la red.
Instituciones educativas
Empresas u organizaciones comerciales
Cualquier tipo de organizacin no gubernamental o no incluida en las
anteriores
Pg. 14

Ahora, a cada pas se le ha asignado un dominio. As pues, podemos encontrarnos:
DOMINIO
mx
us
es
fr
br
PAS
Mxico
Estados Unidos
Espaa
Francia
Brasil
Por lo tanto, podrs interpretar una direccin de Internet como en el siguiente caso:
www.cablecomtab.com.mx
La www indica que es un servicio de la Web de la empresa Cablecom en Tabasco; es una
organizacin o empresa comercial (com) en el pas de Mxico (mx).
SUBDOMINIO:
Por extensin del concepto de dominio, se entiende un subdominio como el nombre de la
mquina dentro de un dominio al que estamos accediendo. La mquina puede ser real (existe
fsicamente) o virtual (realmente no existe la mquina pero se trata un conjunto de directorios
como si existiera dicha mquina y pertenecieran a ella). Como ejemplo analizaremos nuestra
URL:
http://www.esi2.us.es/cofrade
http:// - Hace indicacin a nuestro navegador del protocolo con que debe acceder. En este
caso es HyperText Transfer Protocol (protocolo de transferencia de hipertexto).
www.esi2 - Subdominio: www.esi2 dentro de la Universidad de Sevilla.
us.es - Dominio: Universidad de Sevilla.Espaa.
/cofrade - Directorio dentro del cual estn alojados los ficheros de la WEB.
Pero se habrn ustedes fijado que muchas veces en la barra de direccin de su navegador
aparece http://hercules.us.es/cofrade. Pues eso es simplemente que el nombre verdadero de
la mquina es Hercules, pero tiene asociado un subdominio llamado www.esi2.
DIRECCIN IP:
Del mismo modo que en la red telefnica tenemos un nmero de telfono, en las redes
informticas (e internet es una de ellas) necesitamos tener nuestro "nmero de telfono" para
poder enviar y recibir las pginas, correos, etc. Dado que internet funciona gobernada por el
protocolo TCP sobre IP, ese nmero de telfono es nuestra direccin IP, y nos la asigna nuestro
Pg. 15

ISP (Proveedor de Acceso a Internet) cada vez que nos conectamos a l. Suelen ser variables
(dinmicas), pero se puede contratar una IP fija previo pago del importe correspondiente.
Mediante los Servidores de Dominio de Nombre (DNS) asociamos una direccin IP a un
nombre lgico (dominio en letras) que ser mucho ms sencillo de recordar. Por ejemplo, una
direccin IP del tipo: 195.178.45.56 la podemos asociar con www.midominio.es que ser
mucho ms sencillo de recordar para los que quieran visitar nuestra pgina. El servicio de DNS
conlleva unos gastos fijos anuales, que dependern del tipo de dominio registrado y del pais.
ENLACE:
Un enlace es cualquier referencia dentro de nuestro documento que nos permite navegar
hasta otra direccin. Pueden ser locales (dentro de un mismo portal o WEB) , o externos (un
enlace desde estas pginas a la de alguna Hermandad, por ejemplo). La influencia
angloparlante nos lleva en muchas pginas a incluir una seccin de enlaces llamada LINKS (que
es enlaces en ingls).
ALOJAMIENTO:
Supongamos que ya hemos elegido el dominio que queremos que tenga nuestra WEB. Ahora
debemos situar dichos ficheros en un ordenador que est 24 horas conectado a internet. Eso
es el alojamiento. Podemos optar por varias posibilidades:
Alojamiento propio: debemos conectar un ordenador a internet 24 horas, con una IP fija y
hacer constar esa IP en la tabla de DNS. Esta solucin es muy cara y slo la suelen utilizar
grandes empresas.
Alojamiento contratado: una empresa nos permite alojar nuestros ficheros en su servidor
(previo pago). Segn la modalidad elegida, podemos llevar nosotros los ficheros a una cuenta
en el servidor (hosting: se suelen transferir mediante FTP o Protocolo de Transferencia de
Ficheros) o bien la empresa permite ubicar nuestros equipos o que usemos directamente
equipos de la empresa dentro de sus instalaciones y con diferentes niveles de servicio.
(housing). Esta ltima opcin es, obviamente, ms cara que el hosting. Casi todos los ISP nos
permiten una cuenta que suele rondar los 5 Mbytes de capacidad para alojar nuestros
ficheros.
Alojamiento gratuito: como su propio nombre indica, los ficheros los alojamos en servidores
que son gratuitos, y que suelen incluir carteles (banners) publicitarios o ventanas que se abren
automticamente (Pop-Ups) con publicidad. Es importante leer las condiciones cuando
alojemos nuestras pginas en servidores de este estilo para controlar en la medida de nuestras
posibilidades dicha publicidad.
Pg. 16

ADMINISTRACIN:
Se llama administrador del sistema a la persona encargada del mantenimiento de un sustema
informtico. En el caso de pginas WEB, la influencia anglosajona vuelve a aparecer en el
concepto de WebMaster, que es la persona encargada de administrar un conjunto de pginas
WEB. El webmaster no tiene necesariamente que ser el gestor de los contenidos de la pgina,
si bien, suele serlo. Dos ejemplos muy claros seran las pginas de una gran empresa y la
pgina personal de un alumno.
PROVEEDORES DE SERVICIOS DE INTERNET:

Son empresas que se dedican a proveer servicios de Internet a travs de lneas telefnicas por
medio de un servidor que est conectado a los nodos principales de la red. Ejemplo claro son:
Prodigy de Telmex y Amrica On Line (AOL) entre otros.
1.4. NAVEGADOR DE INTERNET

Un navegador o navegador web (del ingls, web browser) es una aplicacin que opera a travs
de Internet, interpretando la informacin de archivos y sitios web para que stos puedan ser
ledos (ya se encuentre esta red mediante enlaces o hipervnculos)
La funcionalidad bsica de un navegador web es permitir la visualizacin de documentos de
texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar
ubicados en la computadora en donde est el usuario, pero tambin pueden estar en cualquier
otro dispositivo que est conectado en la computadora del usuario o a travs de Internet, y
que tenga los recursos necesarios para la transmisin de los documentos (un software servidor
web).
Tales documentos, comnmente denominados pginas web, poseen hipervnculos que
enlazan una porcin de texto o una imagen a otro documento, normalmente relacionado con
el texto o la imagen.
El seguimiento de enlaces de una pgina a otra, ubicada en cualquier computadora conectada
a Internet, se llama navegacin, de donde se origina el nombre navegador (aplicado tanto para
el programa como para la persona que lo utiliza, a la cual tambin se le llama cibernauta). Por
otro lado, hojeador es una traduccin literal del original en ingls, browser, aunque su uso es
minoritario.
Existen muchos programas navegadoras hoy en da, de los cuales, dos son los ms usados por
millones de usuarios en todo el mundo: el Netscape y el Internet Explorer de Microsoft.
Pg. 17

1.-MOZILLA FIREFOX : Por la sencillez, estabilidad y el gran nmero de posibilidades que
ofrece, Mozilla Firefox es el segundo navegador ms usado por detrs de Internet
Explorer.
2.-GOOGLE CHROME: Google Chrome es un navegador web desarrollado por Google y
compilado con base en componentes de cdigo abierto.
3.-OPERA : El Opera Browser es uno de los mejores navegadores que existe en la actualidad.
4.- AVANT BROWSER: Avant Browser es un navegador de internet que usa el motor de
bsqueda de Windows Internet Explorer.
5.- IE, INTERNET EXPLORER: Es el navegador de Internet ms utilizado de la actualidad.
6.-NETSCAPE NAVIGATOR: Netscape Navigator compiti cabeza a cabeza con Internet
Explorer.
7.-FINEBROWSER: Este multinavegador permite la visualizacin de pginas web de forma
mltiple en una sola ventana.
8.- SAFARI: Este navegador de Apple, denominado Safari crece cada da ms en el mercado.
9.- CRAZY BROWSER: Crazy Browser es un novedoso navegador web.
10.- KALGAN: Es un conjunto de herramientas que permite al usuario tener un producto muy
completo.
11.- GREEN BROWSER: GreenBrowser es un prctico navegador basado en Internet Explorer.
12.- SEA MONKEY: SeaMonkey es un completo navegador web del grupo Mozilla.
13.- MAXTHON: Maxthon es un navegador web que usa y mejora el motor de Internet Explorer
aadiendo una infinidad de novedades.
14.- FLOCK: Flock es un completo navegador gratuito que aade novedosas funciones.
15.- LIVELY BROWSER: Lively Browser es un original navegador que aade adems de
navegacin por pestaas.
16.- CHROMIUM: Navegador de cdigo abierto muy rpido, seguro y estable, que incoporporta
funciones muy interesantes.
BUSCADORES
Son servidores conectados a Internet, que cuentan con un programa de localizacin de
direcciones y directorio de pginas Web mediante la introduccin de una palabra, por lo cual,
facilita la ubicacin de las direcciones y entrega los resultados por medio de enlaces hacia
ellas.
EJEMPLO DE ALGUNOS BUSCADORES
BUSCADOR
LOGOTIPO
DIRECCIN
Google
www.google.com.mx
AltaVista
www.altavista.com
Yahoo
www.yahoo.es
Pg. 18
UNIDAD 2.
FUNDAMENTOS DE HTML
OBJETIVO: Al finalizar la presente unidad, el participante ser capaz de crear de forma sencilla
una pgina web utilizando la estructura bsica del lenguaje HTML mediante un sencillo editor
de texto.
Pg. 19

2.1. QU ES HTML
El HTML (Hyper Text Markup Language), en espaol, Lenguaje de marcacin de Hipertexto,
creado en 1986 por el fsico nuclear Tim Berners-Lee, utilizado normalmente en la www
(World Wide Web). Es el lenguaje con el que se escriben las pginas web.
Hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est
compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido,
vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
HTML no es propiamente un lenguaje de programacin como C++, Visual Basic, etc., sino un
sistema de etiquetas. HTML no presenta ningn compilador, por lo tanto algn error de
sintaxis que se presente ste no lo detectar y se visualizara en la forma como ste lo
entienda.
Tambin existe el HTML Dinmico (DHTML), que es una mejora de Microsoft de la versin 4.0
de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la
pgina palabra por palabra o efectos de transicin al estilo de anuncio publicitario giratorio
entre pgina y pgina.
2.2. ORGENES DEL HTML

1986. Publicacin de la ISO 8879 que presenta el Standard General Markup Language, origen
del HTML.
1989. Tim Berners-Lee, a la sazn en el Centro Europeo de Investigaciones Nucleares
presenta su artculo Information Management: A Proposal dedicndose de lleno al desarrollo
de un sistema que permitiera el acceso en lnea de manera uniforme a la informacin
disponible en muchos recursos distintos, y que pudiese funcionar en mquinas que conectadas
por redes basadas en TCP/IP.
1990-1991.
Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard
Generalized Markup Language), que ms tarde se llamar nivel 0; soporta encabezados, listas
y anclas. Se crea el nombre World Wide Web.
1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo
texto y slo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la
apertura del primer sitio con acceso pblico de World Wide Web el 17 de mayo
(http://info.cern.ch).
1992. Dan Connolly produce la primera Definicin de Tipo de Documento (DTD) para el
lenguaje, llamada HTML 1.0, agregando a la definicin original atributos para modificar el
estilo fsico del texto. Se distribuye Viola, primer visor grfico de Web y disponible slo para
X.11.
1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de
Kansas, si bien lee slo texto. Aparece Mosaic, desarrollado por el Centro Nacional para
Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno grfico que se hace
disponible para computadoras personales, lo que lo hace inmediatamente popular. A fines de
ao, comienzan a aparecer los primeros artculos sobre WWW en diarios y revistas de
circulacin masiva. Tim Berners-Lee utiliza el trabajo del ao anterior de Connolly para
presentar el borrador de la primera norma (RFC -Recommendation for Comments) de HTML
Pg. 20

para Internet.
1994. La Universidad Tcnica de Graz desarrolla un servidor y clientes con mayores
prestaciones para HTML, Hyper-G, que no tiene gran xito. Cello, primer visor de HTML que no
requiere TCP/IP presentado por la Escuela de Leyes de la Universidad de Cornell. Dan Connolly
y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora soporta formularios. Un
grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World Wide
Web, Netscape (tambin conocido como Mozilla), que tiene una amplia aceptacin entre los
usuarios, pero que soporta elementos de programacin que equivalen a una degeneracin del
HTML (tamaos de letra, fondos). Se define un equivalente para los modelos en tres
dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que permite moverse
dentro de los ambientes definidos. En este mismo ao se realizan la Primera y Segunda
conferencias internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3
Organization.
1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del
nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas.
Microsoft produce su primer visor de Internet, el cual tambin utiliza elementos de HTML
degenerados. Una nueva versin de Netscape, Navigator 2.0, agrega soporte de encuadres.
Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de
programacin, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de
WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el
Pacfico en Wagga-Wagga.
1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores
que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que
implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la modelacin
en tres dimensiones, VRML 3.0, que permite interactuar con los objetos definidos. Se celebra
la Quinta conferencia internacional de WWW en Rocquencourt.
1997. D. Raggett presenta, en enero, la versin normalizada del 3.2. En julio, aparece la
versin 4.0, experimental.
1998. HTML 4.0.
2.3. VERSIONES DE HTML

En noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se
cre con objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de
las pginas era ms importante que el diseo.
Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el
diseo de las pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores
eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas que no existan
en el estndar.
El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el
borrador de una nueva versin de HTML, el borrador de HTML 3.0.
Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos
para etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue
bien aceptado por el mercado y varias compaas se unieron para formar un nuevo comit
encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C.
Pg. 21

En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras
proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban
realizado extensiones sobre el estndar HTML 2.0.
En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos
(frames), las hojas de estilo y los scripts.
En septiembre de 2001 se aprob el estndar HTML 4.01.
2.4. QUE SE NECESITA PARA PROGRAMAR HTML :

El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen
los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS
Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensin .htm o
.html.
Tambin se requiere de un o navegador, browser, ya sea Netscape
(http://home.netscape.com) o o Microsoft Explorer (gratis) que se descarga igualmente
(http://www.microsoft.com), Mozilla Firefox, Google Chrome, entre otros.
2.5. LO QUE NO SE REQUIERE PARA PROGRAMAR HTML
No se requiere estar conectado para escribir, ver y mejorar sus pginas Html.
No se requiere tener el ltimo editor Html, sin duda muy eficiente pero caro que podr
siempre adoptar.
2.6. CONSEJOS
Como el lenguaje Html es un conjunto de etiquetas y atributos, no solo parece til sino
tambin indispensable examinarlos y sobre todo de visionarlos por lo menos una vez porque:
Si los editores Html le facilitarn grandemente el trabajo, ellos no son siempre

perfectos, sobre todo cuando hay modificaciones, anulaciones o supresiones
durante el trabajo.
Necesitar entonces consultar el cdigo madre (o fuente) para corregir las
disfunciones.
los cdigos "fuente" de sus pginas preferidas estn disponibles (y sin Copyright). Es
entonces posible inspirarse en ellos para utilizar el proceso sin tener que "inventar de
nuevo el mundo".
Esos mismos editores Html le propondrn trminos como "Heading, Cell spacing,
Numered List..." que son propios del lenguaje Html.
Necesitar un conocimiento agudo del Html para incluir los cdigos de Javascript o de
Vbscript en sus pginas.
Pg. 22

2.7. LA ESTRUCTURA BSICA HTML
UNA PGINA BSICA
El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las
etiquetas (tags). Funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Por
claridad, se usarn en este manual slamente las maysculas.
Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el
documento HTML debe estar entre las etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en s est dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay informacin del documento, que no se ve en la pantalla
principal, principalmente el ttulo del documento, comprendido entre las etiquetas <TITLE> y
</TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los
dems cuando aadan nuestra pgina a su bookmark (o agenda de direcciones).
Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto,
imgenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[Aqu van las etiquetas que visualizan la pgina]
</BODY>
</HTML>
As se ver sobre un documento de Bloc de notas.
Pg. 23

CONSIDERACIONES SOBRE EL TEXTO
Antes de crear nuestra primera pgina, unas consideraciones sobre el texto:
Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla,
veremos que ste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si
queremos separar el texto en distintos prrafos debemos usar la etiqueta <P>, (que no tiene
su correspondiente etiqueta de cierre </P>)
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y
</H2>, etc. (hasta el nmero 6), siendo el nmero indicativo del tamao. El tamao mayor es
el correspondiente al nmero 1. Puedes experimentar en el ejemplo que sigue, cambiando el
nmero para comprobar el efecto que se logra.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos
los navegadores, aunque s la mayora de ellos). Nos centra todo lo que est dentro de ella, ya
sea texto, imgenes, etc.
Tambin tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR>
(no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha
como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede
observar a continuacin:
EJEMPLO PRCTICO
Hagamos juntos nuestro primer documento Html.
Abrir el editor de texto.
Escribir los siguientes cdigos Html dentro de un procesador de Texto:

En el procesador de texto copiamos lo siguiente:
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pgina, aunque todava es muy sencilla. Como el lenguaje HTML no es
difcil,
Pronto estar en condiciones de hacer cosas ms interesantes.
<P> Aqu va un segundo prrafo.
</BODY>
</HTML>
Se habr dado cuenta que a cada etiqueta de un principio de accin, o sea < ... > corresponde
(muy lgicamente) una etiqueta de fin de accin </ ... >.
Notar tambin que las etiquetas no son "case sensitive". Es entonces equivalente escribir
<HTML>, <Html>, <html>, etc, el caso es que siempre se forme la palabra con las respectivas
letras.
Pg. 24

Salvar [save as...] el documento con la extensin .html o .htm
Abrir el navegador.
- Abrir el documento por medio del men "File/Open file".
- Admirar su primer documento Html.
Este est vaco (es normal) pero totalmente operacional! Ahora es necesario proporcionarle
su informacin al interior de las etiquetas <BODY></BODY>.
Para sus eventuales modificaciones, no es necesario volver a abrir cada vez el navegador
volver al editor de texto (sin cerrar el navegador).
modificar los cdigos Html.
guardar el fichero.
Utilizar el comando "Reload" del browser o si ste es perezoso apretar en la barra
"Location" y pulsar "Enter".
Pg. 25
UNIDAD 3.
ELEMENTOS Y ETIQUETAS HTML
OBJETIVO: Al finalizar la presente unidad, el participante ser capaz de conocer y utilizar la

mayora de las etiquetas necesarias para una pgina web as como tambin corregir y depurar
el cdigo HTML.
Pg. 26

3.1. MI PRIMER DOCUMENTO HTML.
Siga las siguientes instrucciones atentamente; ellas le permitirn crear un documento
HTML en su ordenador; este archivo no ser visible para otros usuarios de Internet.
Le recomiendo que cree un directorio en su ordenador para almacenar las pginas
web que vaya haciendo al aprender; y que practique un tiempo antes de poner
pginas en Internet.
1. Abra el editor de textos: en Windows abra el Block de Notas
2. Teclee lo siguiente:
<HTML>
<HEAD>
<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi primera pagina Web</H1></CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<BR>Como el lenguaje HTML no es dificil, pronto estare en
condiciones de hacer cosas mas interesantes.
<P> Aqu va un segundo parrafo.</P>
</BODY>
</HTML>
3. Grabe este archivo con el nombre: ejemplo1.html

4. Abra el visualizador. No necesita conectarse a Internet para ver las pginas en su
computador. Puede trabajar Off-line
5. Elija "Archivo/Abrir pgina" en la barra de men del navegador.
6. Seleccione el archivo ejemplo1.html que acaba de crear.
Las lneas en blanco y las indentaciones del texto se han puesto para mayor claridad,
pero no son necesarias. De hecho, podra estar todo en una sola lnea. Lo importante es
el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de
otra. Vase en el ejemplo cmo lo est la etiqueta <CENTER> dentro de la etiqueta
<H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan
en el orden correcto, pues de lo contrario se produciran errores.
Obsrvese adems la falta de los acentos. Se hablar ms adelante sobre el motivo de
ello.
Usted ha creado su primer documento HTML!.
3.2. CARACTERSTICAS GENERALES DEL LENGUAJE HTML..

Marcas y atributos.
El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de

ahora utilizaremos indistintamente uno de 3 trminos para denominar a los elementos
Pg. 27

que se estructura HTML). La forma general de una marca es la de un comando HTML
encerrado entre dos signos de menor y mayor como a continuacin se muestra:
<marca [atributos]> ......................................[</marca>]
El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el
visualizador encuentra el signo menor (<), examina todos los caracteres hasta que
encuentra el final de la marca - el smbolo mayor (>). Entonces, interpreta el contenido
de la marca, y aplica esa propiedad al texto que viene a continuacin.
Hay marcas que se aplican a todo el documento HTML, o slo desde el punto en que
son insertadas hasta el final del documento. Otras se aplican exclusivamente a un
fragmento del texto. En ese caso, el final de la aplicacin se especifica con la misma
marca precedida de la barra inclinada hacia atrs (/).
Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan
atributos o modificadores. Los atributos matizan el significado de la marca, y que se
expresan de la siguiente forma:
<marca atrib1=valor1 atrib2=valor2..............>
El valor de los atributos se expresan encerrados entre comillas.
En la mayor parte de los visualizadores es posible omitir las comillas y colocar
directamente el valor del atributo. Esta prctica. a pesar de estar extendida, no es muy
aconsejable ya que no est normalizada, y no esta soportada por la totalidad de los
visualizadores.
Algunos atributos slo viene definidos por su nombre (no tienen valor); son los
atributos llamados compactos.
Concatenacin de marcas.
Las marcas se pueden anidar o encadenar una a continuacin de otra, de forma que se
pueden aplicar simultneamente varias propiedades a una misma porcin de
documento. As el texto encerrado en las marcas:
<MARCA1><MARCA2> Texto </MARCA2></MARCA1>
queda afectado tanto por las propiedades de la MARCA1 como por los de la MARCA2.
Todas las marcas son independientes entre s, por los las siguientes lneas de cdigo
HTML, tiene efectos idnticos, sean cuales sean las marcas concretas:
Pg. 28

A pesar de que son expresiones completamente idnticas, es recomendable seguir el
orden lgico de la concatenacin, ya que esto facilita de forma sustancial la edicin de
documentos HTML. De las cuatro opciones anteriores, las correctas seran la primera y
la tercera.
3.3. CUATRO NORMAS FUNDAMENTALES

HTML es simplemente texto
Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se

puede editar con cualquier editor de texto sencillo, como el Block de Notas de
Windows.
Igualdad de maysculas y minsculas.
HTML no distingue entre maysculas y minsculas en la especificacin de marcas y sus

atributos. Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como
atributos en maysculas.
No importan los tabuladores, ni los saltos de lnea
Los visualizadores no toman en cuenta las tabulaciones, los saltos de lnea ni los
espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que
permite obtener resultados uniformes y de buena presentacin de manera bastante
fcil.
La principal desventaja es que un documento HTML, por lo menos se debe usar las
marcas <P>...</P> o <BR> para evitar que quede todo el texto en una sola lnea.
Caracteres especiales
En HTML existen algunos caracteres que son especiales porque juegan un papel dentro
del mecanismo del funcionamiento de HTML, como sucede con los smbolos mayor
que (>) y menor que (<), y otros porque en los primeros tiempos de HTML, no
formaban parte del juego de caracteres internacionales del alfabeto, como sucede con
los acentos.
Sea por los motivos que fuere, el caso es que existen ciertos smbolos que no pueden
escribirse directamente, sino que deben sustituirse por una cadena de caracteres que
el visualizador interpretar de forma correcta. Estas cadenas de caracteres comienzan
siempre por el smbolo (&) seguido de una combinacin de caracteres alfabticos que
Pg. 29

tienen un significado especial en HTML. En la siguiente tabla se muestra cmo escribir
algunos de estos caracteres:
Carcter especial
Los acentos
Smbolo menor que (<)

Smbolo mayor que (>)
La ee
Espacios en blanco
Transcripcin HTML
Comentario
&<vocal a acentuar> acute; En la actualidad la mayora
de los browsers los
soportan
&lt:
>
ñ
En la actualidad la mayora
de los browsers la soportan

(non
breaking HTML slo reconoce un
space)
espacio en blanco entre
palabras
De manera ms general, para representar smbolos reservados o smbolos

particulares, se puede utilizar el cdigo ASCII del smbolo mediante la sintaxis
siguiente:
&#cdigo_ASCII;
3.4. ESTRUCTURA DE UN DOCUMENTO HTML.

Un documento HTML, no es ms que el texto definido entre las marcas:
<HTML>
.....................
</HTML>
Un documento HTML siempre se compone de las siguientes 2 partes:

<HTML>
<HEAD> Cabecera del documento
</HEAD>
<BODY> Contenido del documento
</BODY>
</HTML>
Pg. 30
Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>.

Dentro de la cabecera hay informacin del documento, que no se ve en la pantalla
principal, y que precisa las caractersticas del documento, principalmente el ttulo
del documento.
El ttulo del documento se declara entre las etiquetas <TITLE> y </TITLE>. El
ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems
cuando aadan nuestra pgina a su bookmark (o agenda de direcciones favoritas).
Cuerpo: se inicia mediante el comando <BODY> y se termina con el comando
</BODY>. Este comando acepta numerosos modificadores. Dentro del cuerpo del
documento se incluye cualquier carcter imprimible.
En la prctica algunos visualizadores no necesitan las etiquetas de comienzo y cierre

de <HTML>, <HEAD>, y <BODY> para interpretar un documento HTML. Sin embargo,
cuando diseemos un pgina Web debemos tener en cuenta a la mayora de usuarios
posibles, por lo que es muy recomendable incluir estas marcas.
3.5. COMANDOS BSICOS DE HTML

A continuacin se describen las marcas bsicas de HTML que se pueden incluir en el
cuerpo de un documento HTML.
Definicin de prrafos: P
La marca <P> sirve para separar prrafos en HTML. Adems de introducir un retorno
de carro, fuerza un segundo retorno de carro para dejar una lnea en blanco entre un
prrafo y el siguiente. De esta manera los prrafos quedan ms espaciados y el texto
se vuelve ms legible
En esta marca la etiqueta de fin es opcional.
Por defecto, el prrafo de un documento HTML est justificado a la izquierda. Pero
podemos modificar la alineacin horizontal de un prrafo mediante el atributo ALIGN
de la marca <P>, que puede tomar los valores siguientes.
LEFT: el prrafo es justificado a la izquierda. Valor por defecto.
CENTER: el prrafo es centrado.
RIGHT: el prrafo es justificado a la derecha.
Ruptura de lneas: BR.
La marca <BR> introduce un retorno de carro (o salto de lnea) en el punto del

documento en el que es colocada. Es equivalente al punto y aparte de un texto
normal.
Esta marca es vaca de manera que no necesita de la etiqueta de fin de marca.
Pg. 31

Ttulos de encabezadoso
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamao, que
se utilizan para marcar los ttulos o resaltes en las pginas. Se activan con el comando
<Hn> y se desactivan con </Hn>, donde n es un nmero de 1 a 6. siendo el nmero
indicativo del tamao. El tamao mayor es el correspondiente al nmero 1.
<H1>Nivel de encabezado 1</H1>
Puede experimentar en el ejemplo anterior, cambiando el nmero para comprobar el
efecto que se logra.
Los ttulos de encabezado requieren la marca de fin, y siempre provocan un salto de
lnea, aunque no se le indique.
3.6. DANDO ESTILO AL TEXTO

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamao,
color que se desea que aparezca el texto.
Tipos de letras
Algunas de las marcas que permiten especificar la tipografa de los caracteres son las
siguientes:
<B>Negrita (Bold)</B>
<I>Cursiva (Italic)</I>
<BLINK>Parpadeante (Blink)</BLINK>
<TT>Tamano fijo (TypeWriter)</TT>
<EM>nfasis (Emphasis)</EM>
<STRONG>Gran nfasis (Strong)</STRONG>
<U>Subrayado (Underline)</U>
Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.
Tamao del texto.
Para modificar el tamao se utiliza el atributo SIZE de la marca <FONT>, de la manera

siguiente:
<FONT SIZE="tamao">Texto</FONT>
El comando <FONT> requiere la etiqueta de cierre.
Pg. 32

HTML define siete tamaos de letra distintos, siendo el tamao 3 el que se adopta por
defecto. Sin embargo, la mayora de los navegadores permiten establecer cul es la
correspondencia real del tamao 3. As, se puede hacer que el tamao 3 corresponda a
una fuente Arial de 16, o a una Times de 8.
Existen dos formas de establecer el tamao de un trozo de texto.
Tamao de texto absoluto.

<FONT SIZE=argumento>Texto</FONT>
donde argumento es un nmero entre 1 y 7
Tamao de letra relativos.

<FONT SIZE=argumento>Texto</FONT>
donde argumento es una cadena de caracteres que nos indica, con un
signo + -, el nmero de veces que esa fuente va ser mayor o menor
que el tamao de la fuente por defecto
El uso de tamaos relativos nos permite olvidarnos de cual es el tamao de letra que
se est utilizando en el momento actual, por lo que, en general, ser preferible a
utilizar tamaos de letra absolutos.
Si queremos modificar el tamao de todo el texto del documento, una forma de
hacerlo sera englobar todo el cuerpo del documento en una etiqueta con el tamao
de letra que queremos utilizar. As escribiremos algo parecido a lo que sigue:
<HTML>
<HEAD>
...........
</HEAD>
<BODY><FONT SIZE=4>
........
(contenido del documento)
.......
</FONT></BODY>
</HTML>
Sin embargo, hay otra forma de hacerlo ms elegante y legible, utilizando la siguiente
etiqueta:
Pg. 33

<BASEFONT SIZE="tamao">
Este etiqueta puede situarse en cualquier lugar del documento. Sin embargo, como se
trata de una etiqueta que afecta a todo el documento, para mantener la legibilidad lo
ms lgico es colocarlo en la cabecera.
Si fijamos un tamao de letra bsico distinto del 3, debemos tener en cuenta que es
posible que alguno de los tamaos relativos no pueda llevarse a cabo, puesto que se
sale de los lmites especificados.
Colores del texto.
Para dar color a un texto se utiliza el comando siguiente:

<FONT COLOR="color">Texto</FONT>
En un principio la forma de especificar un color en HTML, era mediante el formato
hexadecimal. Consista en tres nmeros hexadecimales (nmeros expresados en base
16) de dos dgitos cada uno. Con un nmero hexadecimal de dos dgitos podemos
expresar hasta 256 valores distintos. El primer nmero hexadecimal nos va a indicar la
cantidad de rojo que tiene nuestro color, el segundo la cantidad de verde, y el tercero
la cantidad de azul (el blanco ser FFFFFF, el negro 000000). Esta forma de definir los
colores como combinacin de los colores rojo, verde, y azul se denomina RGB (red green - blue).
Afortunadamente, la mayora de los visualizadores, al menos en sus ltimas versiones,
admiten otra forma de insertar colores. En lugar de expresarlos, en formato
hexadecimal, se expresan como cadena de caracteres. Esta cadena es el nombre del
color en ingls.
Para dar color a todo el texto del documento podemos hacerlo con:
<BODY TEXT=blue>
Para especificar el color de fondo del documento deberemos utilizar:
<BODY BGCOLOR=blue>
Texto preformateado: PRE.
El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es
un comportamiento arbitrario, sino que es la forma que tenemos de que,
independientemente de la ventana del visualizador, nuestro prrafo quede
convenientemente justificado
Pg. 34

Sin embargo, es posible que en alguna ocasin queramos que el texto aparezca en el
visualizador tal y como lo hemos introducido, respetando los retornos de carro e
incluso los espacios que podamos haber dejado entre caracteres. Para ello podemos
utilizar la marca <PRE> y englobar en ella todo el texto del documento.
La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco del
archivo original, y la letra aparece como tipo de letra de espacio no proporcional (El
tipo de letra usado por el texto preformateado es el mismo que el de <TT> ... </TT>), y
no con el tipo de letra habitual del visualizador. Esta marca permite mostrar el texto
preformateado tal cual.
Adems, en el texto preformateado no se interpretan los caracteres especiales HTML:
<, > y &.
Esta marca requiere de las etiquetas de comienzo y fin.
Centrando texto.
Para centrar una parte del documento, se delimita lo que se desea centrar mediante el
comando <CENTER> ... </CENTER>.
Lneas horizontales.
La marca <HR> permite trazar una lnea horizontale para separar distintas secciones de
una pgina HTML
Por defecto, las lneas horizontales van de la parte izquierda de la ventana del
visualizador a la derecha.. Por otro lado tienen la parte superior oscura y la inferior
clara, por lo que dan una sensacin de relieve.
Esta marca slo requiere la etiqueta de comienzo.
Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la lnea
horizontal (ancho, longitud,...).
3.7. LISTAS
Las listas en HTML proporcionan una forma de clasificar la informacin, y hacer que
sta sea ms inteligible por parte del visitante de las pginas.
Listas ordenadas: OL.
Tambin llamadas listas numeradas son aquellas en las que cada elemento tiene
delante un nmero que indica el orden del elemento dentro del conjunto de la lista.
La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las
etiquetas de comienzo y fin de estas marcas.
Pg. 35

Cada elemento de la lista ordenada se identifica escribindolo dentro de la marca <LI>
.... </LI>. La etiqueta de fin puede ser omitida.
Con la marca LI no es necesario introducir un retorno de carro detrs de cada
elemento de la lista.
Es posible especificar el tipo de numeracin que se dar (nmeros arbigos, nmeros
romanos, letras, etc.), por defecto se sigue la numeracin rabe.
Las listas numeradas pueden ser anidadas una dentro de otra.
Listas desordenadas: UL.
Tambin llamadas listas no numeradas son listas en las que no es necesario numerar
de alguna manera los elementos que la componen, sino que cada elemento tiene
delante un smbolo (un punto, un cuadrado, etc..).
La forma de especificar una lista desordenada es mediante la marca <UL>. Las
etiquetas de comienzo y fin de esta marca son obligatorias.
Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para
la marca <LI> se puede omitir
Tambin es posible en las listas desordenadas especificar el smbolo que va a aparecer
delante de cada elemento de la lista.
Las listas desordenadas tambin pueden ser anidadas una dentro de otra.
Listas de definicin: DL.
A diferencia de los dos tipos anteriores de listas, las listas de definicin, se utilizan para
presentar la informacin sin marcas, ni nmeros, sino que utiliza los sangrados de los
prrafos.
Las listas de definicin estn constituidas por trminos y su subsiguiente definicin.
La forma de implementar las listas de definicin es con la marca <DL> de la siguiente
forma:
<DL>
<DT> Nombre del termino
<DD> Definicin del trmino
</DL>
Pg. 36

Cada trmino de la lista de definicin se indica con la marca <DT> y no sangrar,
mientras que la descripcin del trmino se indica con la marca <DD> y sangrar hacia
la derecha para resaltarla del trmino.
Antes y despus de la descripcin de cada palabra clave, las listas de definicin
incorporan un retorno de carro,
Las listas de definicin tambin pueden anidarse.
3.8. COMENTARIOS NO VISIBLES EN LA PANTALLA

A veces es muy til escribir comentarios en el documento HTML sobre el cdigo que
escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y
que no queremos que se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos smbolos: 
Ejemplo:

Ejemplo prctico n2
En el editor de textos copiamos:
<HTML>
<HEAD>
<TITLE>Ejemplo 2 - Comandos básicos</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Comandos básicos</H1></CENTER>

<H2>Párrafos</H2>
<P>Este es mi primer párrafo del ejemplo 2</P>
<P>Este es mi segundo parráfo. Aqu hay una ruptura de
lnea<BR>de texto</P>
<HR>
<H2>Listas</H2>
<H3>Ordenadas</H3>
<P>La <FONT SIZE="+1"><I>musica</I></FONT> que mas me gusta es
<I>
(en orden de preferencia): </I></P>
<OL>
<LI>El rock</LI>
<LI>El jazz 
<LI>La musica clasica
</OL>
<H3>Desordenadas</H3>
<P>Sin un orden particular, mis <FONT COLOR="green"><B> aficiones
</B></FONT> son las siguientes:</P>
<UL>
<LI>El cine
<LI>El deporte
Pg. 37

<LI>Natacion
<LI>Baloncesto
</UL>
<H2>De definicin</H2>
<DL>
<DT>Descripcion</DT>
<DD>Es nombrar las propiedades de algo
<DT>Lista descriptiva</DT>
<DD>Es nombrar las propiedades de varios objetos
</DL>
<HR>
<CENTER>También sabemos centrar el texto</CENTER>
<PRE> y escribir
preformateado </PRE>
<BLINK>y a escribir texto parpadeante</BLINK>

<HR>
</BODY>
</HTML>
Guardamos el fichero de texto con el nombre ejemplo2.html y lo cargamos en el

navegador.
3.9. ENLACES: A.
La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en los
enlaces. Los enlaces (o links) proporciona al que visita las pginas un mecanismo muy sencillo
para moverse entre distintos documentos, permitindole moverse en aquellos aspectos que
considere ms importantes, mientras que desde el punto de vista del que crea las pginas
permite distribuir de forma transparente al visitante el lugar o lugares en los que se van a
almacenar los distintos documentos.
Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente:

<A HREF=direccion>Texto del enlace</A>
donde:
direccion: es el destino del enlace.
texto del enlace: es el texto indicativo del enlace que aparece en la
pantalla normalmente con color especial y subrayado.
<A> requiere de la marca de fin.
Vamos a distinguir tres tipos de enlaces:
1. Enlaces a otras zonas de la misma pgina
2. Enlaces a otras pginas.
3. Enlaces a otras zonas de otras pginas.
Pg. 38

Enlaces a otras zonas de la misma pgina
A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un
salto desde una posicin a otra determinada.
As es posible hacer enlaces que lleven al usuario de una parte del documento a otra
dentro del mismo documento con solo hacer click. A este tipo de enlaces los
llamaremos enlaces locales.
Estos enlaces constan de dos objetos:
El enlace:
Corresponde a la zona en la cual el usuario har click, para viajar a otra parte
del documento.
Esta zona aparece subrayada en el documento. Un enlace local se crea
delimitando la zona con el comando <A href="#nombre"> ... </A>, en que
nombre es la etiqueta que se est referenciando.
El nombre enlazado o referenciado
Corresponde a la zona del documento a la cual el usuario llegar al hacer click
en la referencia correspondiente. Un nombre local se crea delimitando la zona
con el comando <A NAME="nombre"> ... </A>, en que nombre es la etiqueta
que asignamos a esta zona.
Ejemplo prctico n 3 de enlaces locales
<HTML>
<HEAD>
<TITLE>Ejemplo 3 - Enlaces locales</TITLE>
</HEAD>
<BODY>
<H2>Enlaces locales</H2>
<H3><A NAME="indice">Indice</A></H3>
<UL>
<LI><A HREF="#uno">Seccin uno</A>
<LI><A HREF="#dos">Seccin dos</A>
<LI><A HREF="#tres">Seccin tres</A>
<LI><A HREF="#cuatro">Seccin cuatro</A>
<LI><A HREF="#cinco">Seccin cinco</A>
<LI><A HREF="#seis">Seccin seis</A>
<LI><A HREF="#siete">Seccin siete</A>
<LI><A HREF="#ocho">Seccin ocho</A>
</UL>
<H3><A NAME="uno">Seccin uno</A></H3>
<P>Esta es la sección 1 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
<H3><A NAME="dos">Seccin dos</A></H3>
Pg. 39

<H3><A NAME="tres">Seccin tres</A></H3>
<H3><A NAME="cuatro">Seccin cuatro</A></H3>
<H3><A NAME="cinco">Seccin cinco</A></H3>
<H3><A NAME="seis">Seccin seis</A></H3>
<H3><A NAME="siete">Seccin siete</A></H3>
<H3><A NAME="ocho">Seccin ocho</A></H3>
</BODY>
</HTML>

navegador.
Como vemos, las referencias locales son muy tiles para crear ndices al comienzo del
documento.
Enlaces a otras pginas
Para enlazar a otro documento, es necesario conocer la ubicacin exacta del

documento que se referenciar. Una ubicacin, puede ser referenciada en forma
relativa o absoluta
Ubicacin relativa:
Se indica especificando la posicin del documento en la estructura de
subdirectorios a partir de la ubicacin del documento actual. Slo se puede
usar para documentos ubicados en el mismo ordenador.
Una referencia relativa a otro documento se hace usando el comando:
<A HREF="ubicacin"> ... </A>
Ubicacin absoluta:
Se indica especificando el URL (uniform resurce locator) de la pgina que se
est referenciando.
Los URL son una manera universal de especificar una direccin. La forma ms
bsica de referenciar un hypertexto es usar el comando:
<A href="http://ordenador/directorio/archivo"> ...
Pg. 40

El ordenador indica la mquina donde se encuentra el documento. El directorio
y archivo indican su posicin dentro de ese ordenador. Los URL tienen muchas
formas distintas para referenciar distintos objetos.
Ejemplo prctico n 4
<HTML>
<HEAD>
<TITLE>Ejemplo 4 - Enlaces a otras páginas</TITLE>
</HEAD>
<BODY>
<H1>Enlaces a otras páginas</H1>
<H2>Referencias relativas</H2>
<P>Se puede referenciar, por ejemplo, a un archivo localizado en el
mismo directorio, como por ejemplo, al <A
href="ejemplo1.html">ejemplo nmero 1</A>. Tambin a un archivo
localizado en otro directorio, por ejemplo, esta
<A HREF="../guiahtml.html">guia HTML</a></P>
<H2>Referencias absolutas</H2>
<H3>Algunos servicios WWW en Espaa</H3>
<P>La <A
HREF="http://www.um.es/~biblio/">biblioteca
de
la
Universidad
de
Murcia</A> que permite
acceso al catalogo de la biblioteca. Tambin est el servidor WWW de
<A
HREF="http://www.rediris.es/">RedIris</A> y el servidor
de <A HREF="http://www.boe.es/">BOE</A> para leer consultar de BOEs
</P>
<H3>Algunos servicios en el extranjero</H3>
<P>Para informarse de la actualidad mundial, se puede acceder al
servicio <A HREF="http://www.cnn.com/">CNN</A>. Para los amantes de
la msica se encuentra el servidor oficial de la <A
HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de
informacin est <A HREF="http://www.yahoo.com/">Yahoo!</A>.
</BODY>
</HTML>

navegador.
Enlaces a una zona de otra pgina
Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica
el URL de la pgina a referenciar, luego un signo # y luego el nombre de la zona a
referenciar.
Pg. 41

Ejemplo prctico n5
<HTML>
<HEAD>
<TITLE>Ejemplo 5- Enlaces a zonas de otras pginas</TITLE>
</HEAD>
<BODY>
<H1>Enlaces a zonas de otras pginas</H1>
<P>Enlazamos a la
<A HREF="ejemplo3.html#uno">la
seccion 1 del ejemplo 3</A>.</P>
<P>Enlazamos a la
<A HREF="ejemplo3.html#cinco">la
sección 5 del ejemplo 3</A>.</P>
</BODY>
</HTML>

navegador.
3.10. IMGENES
Las imgenes son un elemento esencial para disear pginas atractivas. No obstante,
un excesivo nmero de imgenes en una pgina pueden hacer ralentizar el proceso de
visualizacin (las imgenes son las partes de las pginas que ms espacio ocupan, por
lo que su transferencia requiere ms tiempo que la del texto). Es importante conseguir
un compromiso entre una pgina atractiva (lo que lleva incluir grficos), y una pgina
que pueda cargarse en un tiempo razonable
Principales formatos grficos en Internet.
Existen una gran cantidad de formatos grficos en el mundo de los ordenadores, cada
uno de ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en
Internet, solamente debemos tener en cuenta dos formatos muy especficos: el GIF y
el JPEG. Su eleccin no es en absoluto un capricho, adems de la alta resolucin que
consiguen, se trata como veremos, de dos formatos que comprimen el tamao de las
imgenes, por lo que stas pueden transmitirse ms rpidamente por Internet.
Para crear y manipular imgenes hay que utilizar un editor de imgenes, entre los ms
conocidos se encuentran: Paint Shop Pro, Gif Construction Set, y Graphic Workshop.
Formato GIF.
Las siglas GIF provienen del ingls Graphics Interchange Format o formato de
intercambio de grficos. Est formato fue desarrollado por CompuServe para
Pg. 42

proporcionar un mecanismo de transmisin de archivos de imgenes mediante lneas
telefnicas. Este mecanismo consiste en comprimir las imgenes para una transmisin
ms rpida en un medio de baja capacidad como son los hilos telefnicos.
Las imgenes en formato GIF estn limitadas a 256 colores simultneos.
Una propiedad interesante del formato GIF es la de poder seleccionar un color
transparente. As, cuando la imagen en cuestin es mostrada en un visualizador, la
zona de la imagen con el color transparente toma el color del fondo del documento.
Otra propiedad interesante del formato GIF, es la poder crear grficos animados, el
formato de este tipo de imgenes se le denomina GIF 89.
Los archivos de imgenes en este formato tienen asociados la extensin .gif.
Formato JPEG.
JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos
Fotogrficos Reunidos). Al igual que el formato GIF, comprime las imgenes para una
transmisin ms rpida, aunque difiere en el algoritmo de compresin.
Mientras que con el formato GIF la comprensin de un archivo de imgenes viene
determinada, JPEG nos permite especificar la relacin de compresin deseada, por lo
que podemos variar el tamao del archivo. Naturalmente, a mayor relacin de
compresin, menor tamao y peor calidad en la imagen final. Disminuyendo la
compresin obtenemos imgenes de mayor calidad pero tambin de mayor tamao.
No debemos obsesionarnos con la calidad de las imgenes. Hay que tener presente
que Internet es en ocasiones un medio de transmisin bastante lento, por lo que a
veces es preferible perder algo de calidad en las imgenes antes de aburrir al visitante
con nuestros documentos.
Los archivos de imgenes en este formato tienen asociado la extensin .jpg.
Inclusin de imgenes
La etiqueta que se utiliza para la inclusin de imgenes en una pgina Web es la

siguiente:
<IMG SRC=imagen.jpg></IMG>
donde imagen.jpg es un archivo de imagen
Pg. 43

Tamao de las imgenes.
Si no especificamos nada ms, las imgenes aparecern en el navegador con el tamao

que tienen originalmente.
Para modificar el tamao de las imgenes se utilizan los siguientes modificadores en la
etiqueta <IMG>:
WIDTH: especifica la anchura en pixels de la imagen.
HEIGTH: especifica el nmero de pixels que tendr de alto la imagen.
Escalado de imgenes.
Con el uso de loa modificadores HEIGHT y WIDTH podemos ampliar, y reducir las
imgenes sin deformarlas, es decir, escalarlas. Una manera cmoda de hacerlo es
solamente especificar una de las dos dimensiones, se asume que la reduccin o la
ampliacin es proporcional a la otra.
Bordes de la imagen.
Mediante el modificador BORDER se puede aadir bordes a nuestras imgenes.

Alineacin de texto con las imgenes.
La alineacin del texto con las imgenes se realiza mediante el modificador ALIGN. Los
valores que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER,
MIDDLE, ABSMIDDLE, BOTTOM, LEFT, y RIGTH.
Adems podemos especificar la distancia que queremos establecer entre el grfico y el
texto. Si este parmetro no se establece, el texto es situado justo a continuacin de la
imagen. Para introducir espacios horizontales y verticales a continuacin de la imagen
se utilizan los modificadores VSPACE y HSPACE.
Imgenes con texto alternativo.
Los visualizadores tienen la opcin de no mostrar las imgenes, en un intento de

acelerar el acceso a las pginas. Muchas veces, las imgenes incluidas en una pgina
son fundamentales para comprender la informacin que se ofrece. Por ejemplo, una
pgina destinada a alumnos universitarios de asignaturas de estadstica o matemticas
puede contener imgenes de frmulas matemticas. Para estos casos se puede aadir
a la imagen un texto ALTernativo, que d una idea del contenido de la imagen. Para
aadir un texto alternativo, se utiliza la orden como se muestra a continuacin:
<IMG SRC="nombre_imagen" ALT="Texto_alternativo">
Uso de imgenes como enlaces.
Para utilizar una imagen como enlace a otra parte de la pgina o a otra pgina,
simplemente hay que introducirlas dentro de la etiqueta <A HREF> de la siguiente
manera:
Pg. 44

<A HREF=enlace> <IMG SRC=imagen> </A>
Imgenes como fondo de un documento.
Un efecto muy utilizado es el uso de imgenes como fondo de un documento HTML. La

manera de hacerlo es con el atributo BACKGROUND de la marca <BODY>.
La imagen de fondo en general ser ms pequea que el rea de documento del
navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina
superior izquierda, la imagen que hemos elegido como fondo del documento.
A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del
documento debe ser legible por encima de la imagen, por lo que hay que evitar
colocar imgenes con colores demasiado fuertes.
Mapas sensitivos.
Los mapas sensitivos o mapas de imgenes son un tipo determinado de enlace

mediante grficos. Constituyen una herramienta de gran potencia, aunque son algo
complicados de construir y mantener.
Los mapas sensitivos estn compuestos de dos elementos fundamentales: la imagen
del mapa y los enlaces de cada zona del mapa.
La imagen del mapa es la imagen que vamos a dividir en zonas distintas. Pulsando en
cada una de esas zonas iramos a un enlace distinto.
Los mapas sensitivos no se explican en esta gua. Puede encontrar informacin ms
informacin sobre los mapas sensitivos en las referencias que se incluyen en el
apartado "Direcciones Internet de inters".
Ejemplo prctico n6
<HTML>
<HEAD>
<TITLE>Ejemplo 6 - Imagenes </TITLE>
</HEAD>
<BODY BACKGROUND="nubes.jpg" TEXT="#AA0000">
<CENTER>
<H1>Imágenes</H1>
</CENTER>
<HR>
Esta es mi página del Web. No es muy extensa, pero tiene todos
los
elementos básicos. Espero que os guste. Poco a poco le
iré
Pg. 45

añadiendo más cosas interesantes.
<P> <A HREF="ejemplo2.html"> <IMG SRC="hombre.gif">
SIZE=+3>Mis aficiones</FONT>
<P>
<A
HREF="ejemplo4.html">
<IMG
SRC="casa.gif">
SIZE=+3>Mis páginas
favoritas</FONT>
<CENTER>
<H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC="isla.gif" ALT="isla">
<HR>
<CENTER>
<H3>Expediente X - Mulder</H3>
<IMG SRC="3mulder.gif" WIDTH=119 HEIGHT=160></CENTER>
<HR>
</BODY>
</HTML>
</CENTER>
</BODY>
</HTML>
</A>
<FONT
</A>
<FONT

navegador.
3.11. TABLAS
Una tabla es una manera muy compacta y clara de mostrar la informacin. Una tabla
en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre
otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.
Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se
usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar
el contenido de una celda. El elemento de cierre de fila y de celda es optativo.
El texto incluido dentro de cada celda puede ser formateado con cualquiera de las
etiqueta vistas anteriormente
Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras
cosas, unir celdas, especificar la alineacin del contenido de la celda, y mucho ms.
Para entender mejor el comando <TABLE> ... </TABLE>, est disponible una muy
amplia gama de ejemplos.
Ejemplo de tabla
Aqu se muestra una tabla muy simple:
<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
Pg. 46

</TABLE>
Ttulo de la tabla.
Es conveniente que las tablas tengan un ttulo que las identifique y aclare su
contenido. Aunque ese ttulo puede ser contenido colocando texto formateado antes
de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de
la siguiente forma:
<TABLE>
<CAPTION> Nombre de la tabla </CAPTION>
.
</TABLE>
Esta etiqueta tiene la ventaja que el texto formateado se coloca automticamente en
el centro de la anchura de la tabla.
Bordes de la tabla.
Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la
etiqueta <TABLE>. La sintaxis es:
<TABLE BORDER="anchura">
.
</TABLE>
donde anchura indica la anchura en pixels del borde exterior de la tabla.
El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura
que se especifica solo afecta a los bordes externos.
El efecto de sombreado del borde exterior se produce cuando el modificador BORDER
toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual
que los bordes interiores, debemos hacer BORDER=1.
Cabeceras de filas y de columnas.
La inclusin de cabeceras en cada fila y columna ayuda a comprender el contenido de

la tabla.
No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin
embargo, existe una forma alternativa de indicar la cabecera de una fila o columna
mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va
dentro de ella no admite formateado como el de las otras celdas.
Pg. 47

Tamao de la tabla.
Por defecto el tamao de la tabla viene dado por el texto o los grficos que contiene.
Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra
tabla.
La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH
dentro de la etiqueta <TABLE>. La sintaxis es:
<TABLE WIDTH="anchura"> </TABLE>
Aqu anchura puede ser un nmero que especifique en pixels la anchura absoluta de la
tabla, o bien un porcentaje que indique la anchura de la tabla en relacin a la anchura
del rea del documento del navegador.
A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas
ocupa una anchura mayor, la tabla tomar la anchura mnima para que el texto de las
celdas pueda verse ntegramente.
Justificacin de la tabla.
Por defecto, nuestra tabla quedar justificada a la izquierda. La forma de centrarla es

mediante la etiqueta <CENTER>.
Espacio dentro de las celdas.
Es posible que queramos que nuestro texto no quede apretado dentro de las celdas,
sino que exista ms espacio entre los textos de las celdas contiguas de forma que
pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores:
CELLPADDING: establece la distancia mnima en pixels entre los bordes de
cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.
CELLSPACING: establece la anchura en pixels de los bordes de cada celda.
Forma de las celdas individuales.
Justificacin del texto de las celdas.
HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para
ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La
forma de hacerlo es:
<TABLE>
<TR>
<TD ALIGN=horizontal VALIGN=vertical>
..
</TD>
</TR>
</TABLE>
Pg. 48

donde:
horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por
defecto vale LEFT.
vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y
BASELINE. Por defecto vale CENTER.
Si queremos que una determinada justificacin horizontal o vertical afecte a todas las
celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro
de la etiqueta <TR>.
Celdas de diferentes tamaos.
Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo
tamao. Sin embargo, es posible establecer el tamaos de una determinada celda
mediante dos modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT:
WIDTH: especifica la anchura del texto en una celda concreta. Se puede
especificar como valor absoluto o bien como relativo en forma de
porcentaje de la anchura de la tabla.
HEIGHT: establece la altura de una celda individual.
No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila.
La nica forma de hacerlo es poniendo en cada celda de la fila los valores
correspondientes de WIDTH y HEIGHT.
Celdas irregulares.
Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma
de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:
COLSPAN= especifica la altura de una celda en concreta en funcin de la
altura de las celdas adyacentes. Se especifica en nmero de celdas
adyacentes.
ROWSPAN: especifica la anchura de una concreta en funcin del celdas que
estn debajo. Se especifica en nmero de celdas de debajo.
Color de cada celda.
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en

la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de
caracteres.
Texto en una solo lnea.
Si hemos indicado la anchura de una celda y sta es menor que el texto incluido en
ella, y queremos que el texto no ocupe ms lneas, sino que se ample la anchura de la
celda, debemos aadir el modificador NOWRAP dentro de la etiqueta <TD>.
Pg. 49

Ejemplo prctico n7
<HTML>
<HEAD>
<TITLE>Ejemplo 7 - Tablas</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tablas</H1></CENTER>
<H2>Demostracion de COLSPAN y Encabezados</H2>
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH COLSPAN="2">Head1</TH>
<TH COLSPAN="2">Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
</BODY>
</HTML>

navegador.
3.12. EDITORES Y CONVERSORES

En el presente apartado se provee de algunos comentarios y reflexiones acerca del uso
de herramientas automatizadas para la generacin de pginas Web: editores y
conversores.
Editores
Seguramente usted ha visto o conoce programas que pueden asistir a una persona en
la creacin de pginas Web, y quizs se ha preguntado: uso un editor o aprendo
HTML ?
La respuesta que yo le dara es la misma que si usted me preguntara si es mejor saber
aritmtica o ocupar una calculadora: ambas cosas no se contraponen entre s.
Un editor HTML es una gran ayuda al diseador Web: brinda la posibilidad de disponer
y ver la pgina mientras se crea, y de observar inmediatamente cmo aparecern
distribuidos los colores y los elementos dentro del documento, es una ayuda para
recordar las marcas y sus atributos, sin embargo; puede resultar inadecuado por lo
siguiente:
Pg. 50
Poca flexibilidad, y en algunas ocasiones el cdigo que generan en general es

difcil de editar o mantener.
El conjunto de comandos que incorpora puede ser limitado, en caso de que sea
un editor producido por alguna empresa que haga visualizadores, o puede
estar obsoleto.
El HTML que generan est fuertemente orientado al formato fsico, ms que a
la estructura, con lo cual se pierde universalidad en el documento.
Es recomendable comenzar por lo bsico, procurando aprender HTML bien, creando

documentos con editores de texto plano. Despus si se desea se puede ocupar una
combinacin editor de texto plano ms editor HTML para crear documentos, a fin de
explotar al mximo las capacidades de ambos sistemas.
Los editores HTML se clasifican en dos tipos:
Wysiwyg "what you see is what you get": en ellos se puede ir viendo en pantalla
inmediatamente lo que se va creando. son muy tiles para apreciar los colores y la
disposicin en pantalla de los elementos.
No Wysiwyg: ellos usualmente invocan una aplicacin externa (un browser) para
mostrar lo que se va creando. Son muy tiles para recordar los comandos HTML y
sus atributos.
Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el cdigo
HTML y otro con el resultado final.
Por ejemplo, uno de los editores HTML Wysiwyg ms completos es el FrontPage 98 de

Microsoft (http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, tambin
permite trabajar en modo comando.
Pg. 51
UNIDAD 4.
DISEO CON DREAMWEAVER
OBJETIVO: Al finalizar la presente unidad, el participante ser capaz de crear de forma fcil y
sencilla una pgina web utilizando las facilidades del software Dreamweaver
Pg. 52

4.1. QU ES DREAMWEAVER 8
Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y
funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript,
etc., de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar
con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del
programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la
pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la
versin de pago de este estupendo programa.
4.2. NOVEDADES DE DREAMWEAVER
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la
anterior, Dreamweaver MX 2004.
Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provinientes de

otras pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta
forma podrs introducir datos en forato XML fcil y cmodamente.
ejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y
manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS,
donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una
lista mucho mejor dotado de una cuadrcula editable desde donde podrs modificar
sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas
que proporciona la reproducin inmediata de los estilos para diferentes medios
(pantalla, impresora, webTV, PDAs...).
Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2
marcadas por la WCAG/W3C.
Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus
archivos mientras el programa se comunica con tu servidor e incluye los archivos
creados o modificados recientemente. Su sincronizacin ha mejorado notablemente
siendo posible una mejor gestin de cambios, adems de pemitir en uso de
bolqueo/desbloqueo de archivos para que estos no se sobreescriban.
Interfaz mejorada: Los usuarios con problemas visuales podrn acceder auna opcin
de Aumento de la pantaa en vista de diseo para analizar o trabajar con difcles
anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las
guas que permitirn la medicin pxel a pxel de todos los elementos.
Nueva barra de herramientas: Se ha aadido una barra de herramientas a
Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo de Cdigo,
esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por
etiquetas y su contraccin. Una de las nuevas novedades es la posibilidad de aadir
comentarios con un slo clic.
Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin
con PHP5, Coldfusion MX 7 y Video Flash.
4.3. EDITAR PGINAS WEB
Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo
HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un
Pg. 53

editor grfico. Al no utilizar un editor grfico
cuesta mucho ms insertar cada uno de los
elementos de la pgina, al mismo tiempo
que es ms complicado crear una apariencia
profesional para la pgina.
Hoy en da existe una amplia gama de
editores de pginas web. Uno de los ms
utilizados, y que destaca por su sencillez y
por las numerosas funciones que incluye, es
Macromeda Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como
pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la
ventaja de ser gratuitos.
4.4. CMO TENER UNA PGINA EN INTERNET

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio
por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco,
volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco
espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que
tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo
que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no
podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una
empresa, aunque s es aceptable para una pgina personal.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio
consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en
Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible
registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o
.com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que
nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero
de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base
de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser
til slo para usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy
sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que
Pg. 54
luego querrs que se encuentre a disposicin de todo el mundo en Internet.

Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que
subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos
los archivos tal y como aparecen en tu disco duro, respetando el nombre de los
archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio
experimentar fallos y enlaces que no funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees,
ni espacios en blanco. De esta forma te asegurars de que el servidor puede
reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir,
tambin, los nombres en minscula. Algunos servidores distinguen entrre maysculas
y minsculas, por lo que si en tu pgina quieres mostrar la imgen foto1.jpg debers
guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando
fallos.
4.5. ARRANCAR Y CERRAR DREAMWEAVER 8
Veamos las dos formas bsicas de arrancar Dreamweaver 8.

Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la
pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un
men; al colocar el cursor sobre Todos los programas aparece otra lista con
los programas que hay instalados en tu ordenador, buscar Macromedia (o
Adobe si tienes las ltimas versiones), seguidamente Dreamweaver 8, hacer clic sobre
l, y se arrancar el programa.
Desde el icono de Dreamweaver 8 del escritorio .
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes

operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver,
se te pedir confirmacin para guardar o no cada uno de ellos.
4.6. ABRIR Y GUARDAR DOCUMENTOS
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn abrir
de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl+O.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir
Pulsar la combinacin de teclas Ctrl+N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina
bsica, HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar
Pulsar la combinacin de teclas Ctrl+S.
Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con
varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno.
Pg. 55

Para guardar todo puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar todo
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.
Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en
cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en
ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por
ello es conveniente que al principio no utilices esta opcin, al menos hasta que te hayas
habituado a manejar el programa.
4.7. MI PRIMERA PGINA

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior
como puede hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica,
HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen
siguiente.
Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece ms abajo.
Cambia el Ttulo por Mi primera pgina.
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de
color azul.
Seguidamente pulsa sobre el
botn Aceptar.
Ahora vas a insertar una imagen.
Para insertar la imagen, ha de
estar accesible para nosotros.
Para ello debe encontrarse en
nuestro disco duro, en un cd-rom
o en un disquete, pero
preferiblemente en el disco duro.
Muchas de las imgenes que
vemos en Internet se pueden
copiar al disco duro. Al hacer clic
con el botn derecho del ratn
sobre la imagen que queremos
traer de Internet, se abre una
ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que
utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro.
Vamos a ver cules son los elementos bsicos de Dreamweaver 8 , la pantalla, las barras, los
paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman,
dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn
momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en
disposicin de empezar a crear pginas web.
Pg. 56

4.8. LA PANTALLA INICIAL
Al arrancar Dreamweaver aparece una
pantalla inicial como sta, vamos a ver sus
componentes
fundamentales.
As
conoceremos los nombres de los
diferentes elementos y ser ms fcil
entender el resto del curso. La pantalla
que se muestra a continuacin (y en
general todas las de este curso) puede no
coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede
decidir qu elementos quiere que se vean
en cada momento, como veremos ms
adelante.
La barra de ttulo
La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y
seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su
ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los
botones para minimizar,
maximizar/restaurar
y
cerrar.
La barra de mens
La barra de
mens
contiene
las
operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por
ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden
insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es
preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estndar
La barra de herramientas estndar contiene
iconos para ejecutar de forma inmediata algunas
de las operaciones ms habituales, como Abrir
, Guardar
, etc.
La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata
algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas
operaciones son las de cambio de vista del documento, vista previa, etc.
La barra de estado
La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en
Pg. 57

la imagen al encontrarnos en un documento en blanco estamos directamente sobre la
etiqueta <body>).
Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina),
o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable
zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la
apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de
los paneles o inspectores. Vamos a ver los ms importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento
seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento
seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva,
etc.
Pulsando sobre el botn
se despliega para mostrar ms opciones. Este botn se encuentra
en la esquina inferior-derecha.
Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.
La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un
documento sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados
segn su categora: tablas, texto, objetos de formulario, etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos
(como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para
que se muestren ambos a la vez.
Pg. 58

4.9. VISTAS DE UN DOCUMENTO
Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.
La vista Diseo
La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada
de Dreamweaver y la que se suele utilizar habitualmente.
La vista Cdigo
La vista Cdigo se utiliza para poder
trabajar en un entorno totalmente
de programacin, de cdigo fuente. No permite
tener directamente una referencia visual de
cmo va quedando el documento segn se va
modificando el cdigo.
La vista Cdigo y Diseo
La vista Cdigo y Diseo permite
dividir la ventana en dos zonas. La
zona superior muestra el cdigo fuente, y la
inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se
aplica directamente sobre la otra.
Pg. 59
UNIDAD 5.
HOJAS DE ESTILOS
OBJETIVO: al finalizar la presente unidad, el participante tendr un concepto bsico sobre el

manejo de las hojas de Estilos y podr aplicarlas a una pagina web.
Pg. 60

5.1. CONCEPTOS DE HOJAS DE ESTILOS
Uno de las ltimas novedades del HTML 4.0 es la implementacin de las hojas de estilo. Con
ellas podremos tener un diseo mucho ms prolijo y ordenado. Adems separaremos la tarea
del diseador Web de la de los encargado de contenidos.
Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de archivo
anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de
presentacin de los contenidos: tipo, fuente y tamao de letras, justificacin del texto, colores
y fondos, etc. Las hojas de estilo permiten liberar la composicin del texto de los aspectos
visuales y favorecen que se estructure y anote mediante cdigos que permiten un tratamiento
ms eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos
clave de la edicin digital. tilo son una herramienta de gran utilidad de los programas de
tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyen una
parte esencial de los lenguajes de marcas para edicin digital: LaTeX, XML y XHTML. Dos
lenguajes de hojas de estilo son CSS y XSL.
5.2. CSS COMO NOVEDAD

Las hojas de estilo CSS, son una novedad del lenguaje HTML 4.0. Las mismas permiten definir
una serie de estilos para luego aplicarlos a una pgina o, incluso, a un grupo determinado.
Con las hojas de estilo CSS se puede, tanto modificar etiquetas (o TAGS) de HTML, como crear
nuevos estilos. Por ejemplo, podramos hacer que todas las tablas tengan color de fondo
celeste y texto en color blanco, simplemente redefiniendo la etiqueta <table>.
Los estilos se definen de la siguiente manera:
<style type="text/css">
selector1,selector2{propiedad1:valor1;propiedad2:valor2}
</style>
Por ejemplo:
A:link,A:visited{font-style:bold;color:yellow}
</style>
En este ejemplo todos los hipervnculos no visitados (A:link) y los visitados (A:visited)
aparecern en negrita (bold) y en amarillo (yellow)
5.3. DNDE DEFINIR LAS HOJAS DE ESTILO

Los estilos se pueden definir en el encabezado de la pgina HTML (entre las etiquetas <head> y
</head>) o en un archivo externo que llevar la extensin .css.
La ventaja de utilizar un archivo externo nos permitir el uso de las definiciones de estilo en
todas las pginas de nuestro sitio. De esta forma si queremos hacer algn cambio en el estilo
de nuestras pginas, lo tendramos que hacer en un nico archivo (el CSS).
Cabe destacar que las hojas de estilo CSS no solo funcionan para dar formato al texto, sino
tambin a las tablas, listas, prrafos y capas, entre otros.
Pg. 61

5.4. FORMAS DE DEFINIR LOS ESTILOS
Existen varias maneras de definir estilos CSS ya sea tanto para redefinir las etiquetas standard,
como para crear nuevos estilos.
Definindolos y aplicndolos para determinadas etiquetas en todo eldocumento:
H1{color:orange;font-style:italic}
</style>
En este caso H1 es la etiqueta del Titular de mayor tamao y cada vez
que se lo defina aparecer en color naranja y en cursiva.
Estilos "in line", que solo se utilizarn una vez y por esta razn se los define como
valores de la propiedad style. En este caso, el estilo se aplica a un prrafo
<p style="color:blue;background:lightblue;font-weight:bold">
Aca va un parrafo en azul, resaltado y en negrita
</p>
Como clases de estilos: podemos crear clases de estilos propios que usaremos, a
voluntad, en las etiquetas que queramos. Para crear una clase, el nombre debe
comenzar con un punto y no puede contener caracteres como acentos o ees.
<stile type="text/css">
.textoarial{font-face:arial;color:#ffffff;fontstyle:
bold;background:#000000}
</style>
Ahora, para aplicarlo, por ejemplo, al cuerpo del documento (etiqueta <body>), se debe
utilizar el atributo class:
<body class="textoarial">
<p>Este texto es de clase textoarial</p>
</body>
Una clase se puede aplicar a distintas etiquetas, en este caso se aplic a todo el cuerpo del
documento. Se puede crear tambin una clase a partir de una etiqueta HTML. En este caso, se
define de este modo:
P{font-family:arial;color:blue}
P.negrita{font-weight:bold}
Y se utiliza de la siguiente forma:
<P>Parrafo con letra ARIAL y color azul</P>
<BR>
<P class="negrita">Igual que antes pero, adems, en negrita</P>
Tambin se pueden utilizar identificadores cuando se quiere aplicar un estilo a uno o a varios
elementos, los cuales pueden haberse definido con anterioridad o no por lo que se pueden
hacer modificaciones y excepciones. Se los define con el carcter almohadilla (#)
table{font-family:courier;background:#CCFFFF}
#resaltado{font-size:1.5em;font-weight:bold}
</style>
Pg. 62

Para utilizarlo, por ejemplo, en una celda, utilizamos el atributo id:
<td id="resaltado">Ocupacin</td> <td>Estudiante de Ingeniera</td>
En esta tabla, se aplicar el formato definido para la etiqueta table, pero en la primer celda se
aplica un identificador para aumentar el tamao del texto y pasarlo a negrita.
Vnculos de hojas de estilo externas
Dijimos anteriormente que es posible crear una sola hoja de estilos CSS global y guardarla en
un archivo con extensin CSS para que de este modo se pueda vincular a un grupo o a todas
las pginas de nuestro sitio. Para crear esta hoja de estilos podemos utilizar cualquier
programa que trabaje con texto sin formato, como el Block de notas o Note Pad de Windows,
y al momento de guardar, escribir el nombre de la siguiente manera: "estilos.css". De esta
forma, al poner las comillas, el archivo se guardar con la extensin css (de otro modo se
guardara como txt).
En el archivo CSS, no se deben incluir las etiquetas de comienzo y fin (<style...> </style>) , ya
que estas son cdigo HTML y no corresponden a la definicin de estilos.
Para realizar el vnculo debemos colocar el siguiente cdigo en la seccin <head>:
<link rel="stylesheet" type="text/css" href="estilos.css">
En el atributo href, debemos colocar la ubicacin del archivo css. Ahora, todas las pginas que
lleven el link a la hoja de estilos, utilizarn el mismo formato y si queremos hacer algn
cambio, solo debemos modificar el archivo css.
5.5. PARA FINALIZAR

Las hojas de estilo en cascada van a facilitarnos mucho la tarea de formatear el documento,
siempre y cuando sepamos organizarnos bien. En una prxima ocasin veremos cmo manejar
estilos sin necesidad de tocar el cdigo de HTML, todo gracias a la ayuda de los editores
visuales de pginas Web como Dreamweaver o FrontPage.
Pg. 63

BIBLIOGRAFA.
Tejedores del Web - http://www.dic.uchile.cl/~manual/
Carlos Castillo
Dpto. Informtica y Comunicaciones
Universidad de Chile
Tutorial de HTML - http://www.um.es/~psibm/tutorial/
Juan Jos Lpez Garca [ jjloga@fcu.um.es ]
Dpto. Psicologa Bsica y Metodologa
Universidad de Murcia
WebMaestro http://www.wmaestro.com/webmaestro/
Francisco Arocena
http://www.esi2.us.es/cofrade/consulting/consulting1.htm
Pg. 64

Manual Diseño y Creacion de P Web Ok

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual Diseño y Creacion de P Web Ok

Загружено:

Авторское право:

Доступные форматы

Diseo y creacin de paginas web

Instituto de Capacitacin de la Industria de la Construccin

Diseo con Dreamweaver

Diseo y creacin de paginas web

OBJETIVO GENERAL DEL CURSO

Diseo con Dreamweaver

Diseo y creacin de paginas web

PRINCIPIOS BSICOS DE INTERNET ....................................................................... 7

LNEA DE TIEMPO .......................................................................................................... 8

LAN (Local rea Network): Red de rea Local. ................................................................... 10

NAVEGADOR DE INTERNET ......................................................................................... 17

FUNDAMENTOS DE HTML ................................................................................... 19

ORGENES DEL HTML ................................................................................................... 20

VERSIONES DE HTML ................................................................................................... 21

QUE SE NECESITA PARA PROGRAMAR HTML :............................................................ 22

LO QUE NO SE REQUIERE PARA PROGRAMAR HTML ................................................. 22

LA ESTRUCTURA BSICA HTML ................................................................................... 23

UNA PGINA BSICA ........................................................................................................... 23

Diseo y creacin de paginas web

ELEMENTOS Y ETIQUETAS HTML......................................................................... 26

MI PRIMER DOCUMENTO HTML. ................................................................................ 27

CARACTERSTICAS GENERALES DEL LENGUAJE HTML.. ............................................... 27

CUATRO NORMAS FUNDAMENTALES ......................................................................... 29

HTML es simplemente texto ............................................................................................... 29

ESTRUCTURA DE UN DOCUMENTO HTML. ................................................................. 30

COMANDOS BSICOS DE HTML .................................................................................. 31

Definicin de prrafos: P ..................................................................................................... 31

DANDO ESTILO AL TEXTO ............................................................................................ 32

Tipos de letras ..................................................................................................................... 32

Listas ordenadas: OL. .......................................................................................................... 35

COMENTARIOS NO VISIBLES EN LA PANTALLA ........................................................... 37

Enlaces a otras zonas de la misma pgina .......................................................................... 39

Diseo con Dreamweaver

Diseo y creacin de paginas web

Ttulo de la tabla. ................................................................................................................. 47

EDITORES Y CONVERSORES ..................................................................................... 50

DISEO CON DREAMWEAVER ............................................................................. 52

NOVEDADES DE DREAMWEAVER ................................................................................ 53

EDITAR PGINAS WEB ................................................................................................. 53

CMO TENER UNA PGINA EN INTERNET .................................................................. 54

ARRANCAR Y CERRAR DREAMWEAVER 8 .................................................................... 55

ABRIR Y GUARDAR DOCUMENTOS .............................................................................. 55

MI PRIMERA PGINA ................................................................................................... 56

LA PANTALLA INICIAL .................................................................................................. 57

La barra de ttulo ................................................................................................................. 57

VISTAS DE UN DOCUMENTO ....................................................................................... 59

La vista Diseo ..................................................................................................................... 59

HOJAS DE ESTILOS ............................................................................................... 60

CONCEPTOS DE HOJAS DE ESTILOS ............................................................................. 61

Diseo con Dreamweaver

Diseo y creacin de paginas web

CSS COMO NOVEDAD .................................................................................................. 61

DNDE DEFINIR LAS HOJAS DE ESTILO ....................................................................... 61

FORMAS DE DEFINIR LOS ESTILOS............................................................................... 62

Definindolos y aplicndolos para determinadas etiquetas en todo eldocumento: .......... 62

PARA FINALIZAR .......................................................................................................... 63

Diseo con Dreamweaver

Diseo y creacin de paginas web

PRINCIPIOS BSICOS DE INTERNET

OBJETIVO: Al finalizar la presente unidad, el participante ser capaz de conocer e identificar

Diseo con Dreamweaver

Diseo y creacin de paginas web

Diseo con Dreamweaver