Unidad 2

ApuntesdelMduloII,SubmduloIII
COLEGIO DE ESTUDIOS CIENTFICOS Y

TECNOLGICOS
DEL ESTADO DE SONORA
Cuaderno de Trabajo
Mdulo II. Creacin de productos multimedia a travs de

software de diseo
Submdulo III. Elaboracin de Pginas Web.
SONORA, SEPTIEMBRE 2010
M.I.BERTHAEVELIATORRESTORRES
MANEJAR LOS ELEMENTOS BSICOS DE UN LENGUAJE UTILIZABLE EN

LA CREACIN DE PGINAS WEB (HTML, DHTML, ASP, JAVA SCRIPT, CSS)
2.1.
2.2.
2.3.
2.4.
2.5.
2.6.
2.7.
2.1.
Definir los contenidos de la pgina Web

Esquematizar la estructura general de una pgina Web
Utilizar etiquetas en una pgina Web
Establecer vnculos e hipervnculos
Manipular formularios en una pgina Web
Manipulacin de tablas en una pgina Web
Manipular objetos en una pgina Web
Definir los contenidos de la pgina Web
2.1.1. Conceptos generales

a) Internet
Internet es una red global de equipos informticos que se comunican mediante un
lenguaje comn. Al conectarse a este sitio Web se ha conectado a Internet. Es
similar al sistema de telfonos internacional: nadie posee ni controla todo el
conjunto, pero est conectado de forma que funcione
como una gran red. Hoy en da, entre treinta y cuarenta
millones de personas tienen acceso a Internet. Esto le
incluye a usted.
El Web permite saltar mediante un "hipervnculo" de una
pgina a otra. Imagine que el Web es una gran
biblioteca. Los sitios Web son los libros y las "pginas" de Web pginas concretas
de los libros. Las pginas pueden contener noticias, imgenes, pelculas, sonidos,
grficos en tres dimensiones, casi cualquier cosa. Estas pginas pueden estar
situadas en sistemas en cualquier lugar del mundo. Al conectarse al Web, tiene
igual acceso a informacin en cualquier lugar del mundo; sin restricciones o costos
de larga distancia.
Las direcciones electrnicas son la forma de ubicar unvocamente a cada persona
y computadora en la Red. Son nicas: no puede haber dos iguales en el mundo,
porque los mensajes se perderan. Existen tres tipos: las de computadoras
(llamadas dominios), las de personas (casillas de E-mail) y las de recursos (por
ejemplo, una pgina de la Web). Su estructura se basa en partes fijas y partes

opcionales.
Cmo funcionan realmente?
Las direcciones electrnicas que se conocen y utilizan a diario han sido diseadas
para el uso de los humanos: su formato intenta adecuarse al hecho de que es ms
fcil recordar palabras que nmeros. En realidad, cada computadora conectada a
Internet posee un nmero nico llamado IP (Internet Protocol) que corresponde a
cada direccin electrnica humana. El nmero IP se compone de cuatro grupos de
nmeros separados por puntos, donde cada uno puede tomar cualquier valor entre
0 y 255, por ejemplo 200.56.1.224.
La informacin que circula por Internet se basa en la direccin IP de cada
computadora de destino. Cuando una direccin electrnica ingresa en la mquina,
comienza a trabajar un DNS (Servidor de Dominio o Domain Name Server),
computadora especial que convierte o transforma los nombres de la direccin en
una direccin IP; o esta en una direccin electrnica, de modo que el mensaje
pueda ir y venir por la Red. Los proveedores de servicios en Internet o servidores
de pginas Web tienen sus propios servidores de Dominio, sin los cuales sera
imposible comunicarse adecuadamente con las personas y computadoras de
Internet.
Direcciones de Computadoras
Todo recurso de Internet est alojado en una computadora servidor (server o host)
que tiene asignada una o varias direcciones electrnicas. Cada computadora o
persona que se conecta a Internet tiene asignada una direccin electrnica nica.
El nombre electrnico de un grupo de computadoras relacionadas (por ejemplo, de
todas las computadoras pertenecientes a una misma empresa, en Internet se
llama Dominio (Domain). Cuando se trata de una computadora, la estructura de
direccin se compone de cuatro partes, cada una de las cuales brinda distinto tipo
de informacin. Las partes estn separadas por un punto (sin espacios
intermedios) y pueden estar presentes o no.
El esquema bsico sera, Dominio=computadora.organizacin.tipo.pas. Ejemplo:
www.arrakis.es
Tipo
Es una clasificacin que existe para identificar la actividad de la organizacin. Los
tipos se clasifican en:
Clasificacin
.com (en algunos pases, .co)
.edu (en algunos pases, .ac)
Significado
Ejemplo
Es una compaa u 9 Ford.com
organizacin comercial.
9 Bancomer.com
Es una institucin de 9 mit.edu
Clasificacin
.gob (en algunos pases .gov)

.mil
.net
.org
Significado
educacin, universidades,
colegios,
institutos
o
centros de investigacin.
Se trata de organizaciones
del gobierno.
Es una institucin militar.
9
9
9
9
9
9
9
9
Se trata de algn nodo 9
administrativo
o
de 9
conexin de un proveedor
de servicios, o de alguna
entidad de servicios.
Se
utiliza
para 9
organizaciones que no 9
entren en ninguna de las 9
categoras anteriores, por 9
ejemplo organizaciones sin 9
fines de lucro.
9
Ejemplo
harvard.edu
cecytes.edu
Itson.edu
sonora.gob
presidencia.gob
armada.mil.co
defenselink.mil
army.mil
internic.net
Prodigy.net
Ife.org.mx
educar.org
vidahumana.org
cndh.org.mx
greenpeace.org
conevyt.org.mx
Existen otras nuevas jerarquas recientemente creadas y an no implementadas:

.firm para empresas o corporaciones
.store para empresas que ofrecen negocios de venta online
.web para entidades que se dediquen a actividades relacionadas con la Web.
.arts
para instituciones que desarrollen actividades culturales o de
entretenimiento.
.rec Entidades que se dediquen a actividades relacionada con la recreacin y los
juegos.
.info para entidades que brinden reportes o informacin.
.nom para personas fsicas que deseen su propio dominio.
Pas
Identifica el pas al cual pertenece el dominio. Esta parte de la direccin no
siempre est presente. Se ha creado una codificacin normada de cdigos de
pases . Ejemplos: au Australia, ca Canad, ie Irlanda , it Italia, jp Japn,
uk Reino Unido, co Colombia, etc.
Las Direcciones de Dominio
Son nicas en el mundo, no puede haber dos iguales.
Se escriben siempre en minscula.
Nunca llevan espacios entre palabras.
Se componen de caracteres comunes: letras, nmeros, guiones.
Nunca debe usarse la ni letras acentuadas, ni $, ni #, ni otro carcter de
ese tipo.
Cada parte se separa por puntos.

No hay un mximo de caracteres de longitud.
Sin embargo, siempre se trata de hacerlas lo ms cortas posibles.
b) WWW (WORLD WIDE WEB)
Lo que ha dado el punto de salida al extraordinario impulso de los accesos a
Internet ha sido la creacin de un sistema que facilita y agiliza la localizacin y el
transporte de informaciones a travs de la red. Esto ha sucedido a partir de 1990
con la creacin de la World Wide Web a manos de Tim Berners-Lee del centro
europeo de investigacin del CERN de Ginebra, en Suiza.
De qu se trata? Como dice su nombre es una tela de araa, grande como el
mundo, de informaciones conectadas entre s. Este modo de utilizar la red ha
permitido crear algo similar a una nica y gran biblioteca virtual. En esta biblioteca
los volmenes contenidos se organizan de forma hipertextual y son reclamados en
el momento en el cual el usuario los solicita para consultar.
Fsicamente las informaciones son depositadas en ordenadores esparcidos por el
mundo (los llamados sitios). La red funciona como sistema de transporte y lleva
las informaciones hacia quien las solicita. Una autntica tela de araa de recursos
se vuelve as accesible a todos, aunque se encuentre a miles de kilmetros de
distancia del lugar donde estn contenidos.
Est claro que se trata de un sistema muy simple de consultar, porque no necesita
el uso de ningn comando o men en particular, sino que basta un clic del ratn.
No hay que hacer nada ms que leer el texto reclamado, llamado pgina
hipertextual, y si se desea, seguir los enlaces hacia nuevas pginas.
Adems, existe la posibilidad de importar de la red las noticias reclamadas,
conservndolas en nuestro ordenador o imprimindolas. Para los que tengan en
mente la lectura secuencial de un libro, pgina tras pgina, el poder saltar de un
vdeo a otro siguiendo caminos diferentes, representa una agradable sensacin de
libertad. Se comprende bien entonces que cada usuario gracias a la Web pueda
crearse un itinerario personal en el interior de un ocano de informaciones
esparcidas en todo el globo.
World Wide Web (el Web o WWW) proporciona una interfaz grfica por la que es
fcil desplazarse para buscar documentos en Internet. Estos documentos, as
como los vnculos entre ellos, componen una red de informacin.
Funcionamiento de la www
En el mundo existen un cierto nmero de ordenadores, llamados servidores
WWW, en los cuales se graban las informaciones.
Cada servidor alberga un cierto nmero de pginas. La red Internet conecta los
servidores entre ellos y con los ordenadores de los usuarios que se llaman cliente.
Para visualizar una determinada pgina, el usuario debe pedirle una copia al
servidor que la alberga. Esto se hace de modo transparente con un programa
adecuado, llamado navegador, instalado en su ordenador.
La red hace pues de canal de comunicacin entre servidor y cliente, y por este
motivo se la llama autopista de la informacin.
5
Las informaciones que transitan en la red son fragmentadas a la salida en

pequeas unidades llamadas paquetes, que se recomponen automticamente a
su llegada.
En realidad, la red no es una autopista lineal y rectilnea, sino que conoce
obstculos de diversos tipos. Pueden verificarse, por ejemplo, ralentizaciones
debidas a un excesivo trfico, o se pueden encontrar trayectos interrumpidos.
Algunos vehculos (paquetes) son ms pequeos y veloces, otros ms lentos, pero
capaces de llevar mayor cantidad de noticias. Las prestaciones ofrecidas por la
red, pues, pueden variar enormemente.
Un aspecto interesante del mundo WWW es que la mayor parte de las
informaciones actualmente disponibles son accesibles gratuitamente. Para utilizar
un eslogan: es como tener el mundo en casa.
En los ltimos tiempos, no obstante, una serie de informaciones, ligadas al mundo
cientfico y tcnico, estn accesibles slo tras una forma cualquiera de pago. Por
ejemplo, para consultar algunas bases de datos, es necesario obtener de los
gestores del servicio la autorizacin, bajo forma de contrasea. De todos modos,
esto slo atae a un nmero limitado de servicios online.
c) Correo electrnico
El correo electrnico es el intercambio de mensajes almacenados en computadora
por medio de las telecomunicaciones, es decir dos personas que tenga acceso a
una cuenta de correo puede enviarse cartas. Sin embargo, se pueden tambin
enviar archivos en otros formatos. El correo electrnico representa una de las
primeras aplicaciones del Internet y sigue siendo la de mayor uso.
El correo electrnico (E-Mail o Electronic Mail en ingls) es el segundo servicio
ms usado de la Red Internet (el primero es la navegacin por la World Wide
Web). Dos personas que tengan acceso a una cuenta de correo en Internet puede
enviarse mensajes escritos desde cualquier parte del mundo a una gran velocidad.
Lo normal es que un mensaje tarde entre unos pocos segundos o minutos,
dependiendo de la cantidad de texto que se enve.
El Correo Electrnico nos permite enviar cartas escritas con el ordenador a otras
personas que tengan acceso a la Red. Las cartas quedan acumuladas en Internet
hasta el momento en que se piden. Es entonces cuando son enviadas al
ordenador del destinatario para que pueda leerlas. El correo electrnico es casi
instantneo, a diferencia del correo normal, y adems muy barato. Podemos

cartearnos con cualquier persona del Mundo que disponga de conexin a Internet.
Algunas ventajas sobre el uso del correo tradicional como son:
Su costo es bajo, si se desea enviar mensajes a otro pas.
Un mismo mensaje se puede enviar a varios destinatarios al mismo tiempo.
Es posible adjuntar al mensaje diversos tipos de archivos.
El texto de un mensaje puede ser copiado para editarse o imprimirse.
Los mensajes son enviados y recibidos casi al mismo tiempo.
Algunas pginas que nos permiten construir correo electrnico son:
Hotmail
www.hotmail.com
Yahoo
www.yahoo.com.mx
Mixmail
www.mixmail.com
Latinmail
www.latinmail.com
Gmail
www.gmail.com
d) Navegadores
La navegacin en la Web es posible gracias a los navegadores. En el curso de
los aos se han fabricado diversos tipos de navegadores
cada vez ms potentes y fciles de usar. Dada la naturaleza
no comercial de los aos iniciales de la red, los primeros
instrumentos de navegacin se desarrollaron en el interior de
las universidades y de los centros de investigacin y se
pusieron a disposicin gratuita de todos los usuarios.
En esta primera fase de desarrollo se puso mayor nfasis en
la posible utilizacin de ordenadores de distintos tipos con
requisitos mnimos: las interfaces, por ejemplo, eran
puramente textuales.
Al difundirse las interfaces grficas se desarroll Mosaic, uno de los navegadores
ms utilizados en el pasado reciente, convertido en el antecesor de los
navegadores actuales.
La abertura de la red a los servicios comerciales y el descubrimiento de la Web
como vehculo de publicacin de informaciones a bajo coste ha creado una serie
de exigencias: por un lado, es importante presentar las pginas de modo
grficamente adecuado, enriquecido con elementos multimedia, como sonidos y
filmaciones; por otro lado, para simplificar el uso de la red por parte de los
inexpertos, se han integrado funcionalidades diferentes de acceso a Internet,
como el correo electrnico y la transferencia de archivos.
Los navegadores mayormente utilizados hoy en da son Netscape Communicator,

Microsoft Internet Explorer y Mozilla.
e) Buscadores
La cantidad de pginas electrnicas es enorme y encontrar
alguna sobre un tema determinado, si no se conoce la
direccin o URL, puede ser muy difcil. Para encontrar
direcciones con temas especficos se emplean los
buscadores.
Los buscadores permiten rastrear en la Web las pginas que contengan la
informacin deseada. Los buscadores de Internet, tambin denominados motores
de bsqueda (Search Engines). Se trata de sitios especiales mediante las cuales
puede rastrear en la Web las pginas que contengan la informacin deseada.
Presentamos a continuacin una lista de los buscadores ms populares:
AltaVista
http://www.altavista.com
Yahoo!
http://www.yahoo.com.mx
Lycos
http://www.lycos.com
Infoseek
http://infoseek.go.com
Google
http://google.com
Excite
http://www.excite.com
Open Text
http://www.opentext.com
Planet Search
http://www.planetsearch.com
f) Servidor Web
Es un programa que implementa el protocolo HTTP (hypertext transfer protocol).
Este protocolo est diseado para transferir lo que llamamos hipertextos, pginas
Web o pginas HTML (hypertext markup language): textos complejos con enlaces,
figuras, formularios, botones y objetos incrustados como animaciones o
reproductores de sonidos.
Sin embargo, el hecho de que HTTP y HTML estn
ntimamente ligados no debe dar lugar a confundir ambos
trminos. HTML es un formato de archivo y HTTP es un
protocolo.
Cabe destacar el hecho de que la palabra servidor
identifica tanto al programa como a la mquina en la que
dicho programa se ejecuta. Existe, por tanto, cierta
ambigedad en el trmino, aunque no ser difcil diferenciar a cul de los dos nos
referimos en cada caso.
Un servidor Web se encarga de mantenerse a la espera de peticiones HTTP
llevada a cabo por un cliente HTTP que solemos conocer como navegador. El
navegador realiza una peticin al servidor y ste le responde con el contenido que
el cliente solicita. A modo de ejemplo, al teclear www.wikipedia.org en nuestro
navegador, ste realiza una peticin HTTP al servidor de dicha direccin. El
servidor responde al cliente enviando el cdigo HTML de la pgina; el cliente, una
vez recibido el cdigo, lo interpreta y lo muestra en pantalla. Como vemos con
este ejemplo, el cliente es el encargado de interpretar el cdigo HTML, es decir, de
mostrar las fuentes, los colores y la disposicin de los textos y objetos de la
pgina; el servidor tan slo se limita a transferir el cdigo de la pgina sin llevar a
cabo ninguna interpretacin de la misma.
Sobre el servicio Web clsico podemos disponer de aplicaciones Web. stas son
fragmentos de cdigo que se ejecutan cuando se realizan ciertas peticiones o
respuestas HTTP. Hay que distinguir entre:
Aplicaciones en el lado del cliente: el cliente Web es el encargado de

ejecutarlas en la mquina del usuario. Son las aplicaciones tipo Java o
Javascript: el servidor proporciona el cdigo de las aplicaciones al cliente y
ste, mediante el navegador, las ejecuta. Es necesario, por tanto, que el
cliente disponga de un navegador con capacidad para ejecutar aplicaciones
(tambin llamadas scripts). Normalmente, los navegadores permiten
ejecutar aplicaciones escritas en lenguaje javascript y java, aunque pueden
aadirse mas lenguajes mediante el uso de plugins
Aplicaciones en el lado del servidor: el servidor Web ejecuta la aplicacin;
sta, una vez ejecutada, genera cierto cdigo HTML; el servidor toma este
cdigo recin creado y lo enva al cliente por medio del protocolo HTTP.
Las aplicaciones de servidor suelen ser la opcin por la que se opta en la
mayora de las ocasiones para realizar aplicaciones Web. La razn es que,
al ejecutarse sta en el servidor y no en la mquina del cliente, ste no
necesita ninguna capacidad adicional, como s ocurre en el caso de querer
ejecutar aplicaciones javascript o java. As pues, cualquier cliente dotado de
un navegador Web bsico puede utilizar este tipo de aplicaciones.
Algunos servidores Web importantes son:

Apache
IIS
Cherokee
Otros servidores, ms simples pero ms rpidos, son:
lighttpd
thttpd
g) Pgina Web
Una pgina de Internet o pgina Web es un documento electrnico que contiene
informacin especfica de un tema en particular y que es almacenado en algn
sistema de cmputo que se encuentre conectado a la red mundial de informacin
denominada Internet, de tal forma que este documento pueda ser consultado por
cualesquier persona que se conecte a esta red mundial de comunicaciones y que
cuente con los permisos apropiados para hacerlo. Una pgina Web es la unidad
bsica del World Wide Web.
Una pgina Web tiene la caracterstica peculiar de que el texto se combina con
imgenes para hacer que el documento sea dinmico y permita que se puedan
ejecutar diferentes acciones, una tras otra, a travs de la seleccin de texto
remarcado o de las imgenes, accin que nos puede conducir a otra seccin
dentro del documento, abrir otra pgina Web, iniciar un mensaje de correo
electrnico o transportarnos a otro Sitio Web totalmente distinto a travs de sus
hipervnculos.
Estos documentos pueden ser elaborados por los gobiernos, instituciones
educativas, instituciones pblicas o privadas, empresas o cualquier otro tipo de
asociacin, y por las propias personas en lo individual.
h) Sitios Web
Es un conjunto de archivos electrnicos y pginas Web referentes a un tema en
particular, que incluye una pgina inicial de bienvenida, generalmente denominada
home page, con un nombre de dominio y direccin en Internet especficos.
Un sitio Web (en ingls: Website) es un conjunto de pginas Web, tpicamente
comunes a un dominio de Internet o subdominio en la World Wide Web en
Internet. Todos los sitios Web pblicamente accesibles constituyen una gigantesca
"World Wide Web" de informacin.
A las pginas de un sitio Web se accede desde un URL raz comn llamado
portada, que normalmente reside en el mismo servidor fsico. Los URL organizan
las pginas en una jerarqua, aunque los hiperenlaces entre ellas controlan cmo
el lector percibe la estructura general y cmo el trfico Web fluye entre las
diferentes partes de los sitios.
Algunos sitios Web requieren una subscripcin para acceder a algunos o todos
sus contenidos. Ejemplos de sitios con subscripcin incluyen muchos sitios de
pornografa en Internet, parte de muchos sitios de noticias, sitios de juegos, foros,
servicios de correo electrnico basados en Web y sitios que proporcionan datos de

bolsa en tiempo real.
Tipos de sitios Web

Existen muchas variedades de sitios Web, cada uno especializndose en un tipo
particular de contenido o uso, y puede ser arbitrariamente clasificados de muchas
maneras. Unas pocas clasificaciones pueden incluir:
Sitio archivo: usado para preservar contenido electrnico valioso

amenazado con extincin. Un ejemplo es: Internet Archive, el cual desde
1996 ha preservado billones de antiguas (y nuevas) pginas Web.
Sitio weblog (o blog): sitio usado para registrar lecturas online o para
exponer diarios en lnea; puede incluir foros de discusin. Ejemplos:
Blogger, Xanga. LiveJournal, WordPress, www.x0101.com.
Sitio de empresa: usado para promocionar una empresa o servicio.
Sitio de comercio electrnico: para comprar bienes, como Amazon.com.
Sitio de comunidad virtual: un sitio donde las personas con intereses
similares se comunican con otros, normalmente por chat o foros. Por
ejemplo: MySpace, Facebook, Hi5, Multiply, Orkut.
Sitio de Base de datos: un sitio donde el uso principal es la bsqueda y
muestra de un contenido especfica de la base de datos como la Internet
Movie Database.
Sitio de desarrollo: un sitio el propsito del cual es proporcionar informacin
y recursos relacionados con el desarrollo de software, diseo Web, etc.
Sitio directorio: un sitio que contiene contenidos variados que estn
divididos en categoras y subcategoras, como el directorio de Yahoo!, el
directorio de Google y el Open Directory Project.
Sitio de descargas: estrictamente usado para descargar contenido
electrnico, como software, demos de juegos o fondos de escritorio:
Download, Tucows, Softonic, Baulsoft.
Sitio de noticias: Similar a un sitio de informacin, pero dedicada a mostrar
noticias y comentarios.
Sitio buscador: un sitio que proporciona informacin general y est pensado
como entrada o bsqueda para otros sitios. Un ejemplo puro es Google, y el
tipo de buscador ms conocido es Yahoo!.
Sitio de subastas: subastas de artculos por internet, como eBay.
Sitio portal: un sitio Web que proporciona un punto de inicio, entrada o
portal a otros recursos en Internet o una intranet.
Sitios Educativos promueven cursos presenciales y a distancia, informacin
a profesores y estudiantes, permiten ver o descargar contenidos de
asignaturas o temas.
Diferencia entre sitio Web y pgina Web
10
A veces se utiliza errneamente el trmino pgina Web para referirse a sitio Web.
Una pgina Web es parte de un sitio Web y es un nico archivo con un nombre de
archivo asignado, mientras que un sitio Web es un conjunto de archivos llamados
pginas Web.
11
2.1.2. Definir objetivos de la pgina Web

Es importante analizar las principales motivaciones que tenemos para crear una
pgina Web y sobretodo las estrategias que debemos llevar a cabo para hacerlas
rentables.
12
Al iniciar una pagina Web, debemos tener muy clara la estrategia que vamos a
seguir y el por qu? y para que? queremos tener esa Web.
Los objetivos de una pgina Web son:
El primer objetivo es que la navegacin sea rpida y sencilla. Es decir, que la
pgina que tarde ms de 5 segundos en cargar pierde solo por este captulo
entre un 20 y un 30% de los visitantes. Rpida tambin se refiere a que es
necesario eliminar esas odiosas pginas iniciales de presentacin que tardan
una eternidad en cargar y que solo sirven para lucimiento del diseador y
alejamiento del negocio, o esas otras de seleccin de idioma. Que sea sencilla
significa que los mens deben estar bien visibles en la parte izquierda o
superior de la pgina, lugares a los que se dirige la vista por defecto. La
informacin no debe estar a ms de tres clicks de ratn desde la pgina
principal y la presentacin de la misma debe ser lo ms amplia posible.
El segundo objetivo de una Web debe ser que te localicen o encuentren

fcilmente. De nada sirve tener un sitio maravilloso si los usuarios no llegan a
l. Por mucho que se indique http://miempresa.com en las facturas, tarjetas de
visita y la publicidad pocas personas teclearn el nombre de la empresa o el de
la Web directamente en la barra de direcciones del navegador. Muchas de
ellas usarn el buscador preferido (Google, Yahoo, MSN) para localizarla o
llegarn a ella a travs de un link publicado en otra Web en la que se hable de
la empresa.
El tercer objetivo y el ms difcil de lograr es crear una comunidad dinmica en

torno a la Web. Convertir la Web en un punto de encuentro, hacerla
participativa y usar herramientas tan sencillas como los boletines para
mantener a los usuarios/clientes informados de novedades de inters. Muchas
webs no llegarn a este punto, pero que sepan que si ocupan su esfuerzo en
lograrlo su presencia en Internet ser dinmica y no esttica y generar
muchas y nuevas oportunidades de negocio, convirtindose en un canal de
venta ms.
2.1.3. Definicin de contenidos para la pgina Web

Cuerpo de Pgina: El contenido de una pgina Web, constituida por
encabezados, texto y vnculos conforman el cuerpo de la pgina. Cada uno de
estos 3 elementos influyen sobre la posicin que se alcanza en los motores de
bsqueda. Primero se redacta el texto, dividido en tres y hasta seis secciones,
encabezadas con subttulo, cuyas oraciones y prrafos ilustran diferentes
aspectos que ataen al tema principal.
Extensin de Texto en Pgina Web: En condiciones ideales y en trminos
generales una buena pgina Web incluye 420 vocablos entre los cuales las
palabras y frases claves (keywords), ocupan un tres por ciento del total del
nmero de palabras incluyendo las que aparecen en los encabezados,
vnculos, etiquetas de imagen y etiquetas de vnculos.
Densidad de un Genrico y Frase Clave: En una pgina de 420 vocablos, las
palabras (genricos) y frases clave aparecern un mximo de 12 veces. Si en
el texto existe una frase o palabra con mayor presencia que ellas, se hace
necesario disminuir el nmero de veces que aparece. Continuamente sucede
que la frase que uno desea destacar no es la de mayor densidad.
Peso del Contenido: Algunos expertos sostienen que si el contenido de la
pgina Web es de poca extensin ser indexada con facilidad y en buena
posicin. Sin embargo, con el correr del tiempo, estas pginas resultan
vulnerables a perder su posicin, ya que pueden ser reemplazadas por otras
que presentan mayor claridad en la ilustracin del tema.
Pgina valiosa: Debe de exhibir texto indito y es consecuente con el propsito
de enriquecer el conocimiento del lector. Por esta razn se recomienda evitar
aseveraciones propias del juicio ajeno, que en forma unilateral expresan cosas
difciles de comprobar. La consistencia de un texto se manifiesta mediante la
claridad con que su lenguaje escueto es capaz de verbalizar conceptos, ideas
o sentimientos. La buena sintaxis y semntica son impulso bsico para que
una pgina se ubique entre las top 10.
Fuerza del Texto Principal: Es relevante cuando se quiere alcanzar posiciones
convenientes en buscadores, desarrollar el tema principal y darle fuerza al
texto utilizando una sntesis amigable estilo Web semntico.
La meta es darse a entender con claridad: Para ello, el texto subyacente a
cada subttulo debe desarrollar en forma directa el tema que ese subttulo
postula y que, a su vez, se relaciona con el tema central de la pgina.
13
2.1.4. Lenguajes utilizables en la creacin de pgina Web

El servicio de diseo de pginas Web, es de acuerdo a las necesidades y gustos
de los clientes, ya que se brindan propuestas con las tendencias que el sitio Web
pudiera adoptar, los clientes deciden como quiere que sea su pgina Web,
tomando en cuenta la forma mas idnea y efectiva de presentar su empresa y sus
productos en la red de Internet para una mayor penetracin en el mercado.
Existen diferentes tecnologas involucradas en desarrollo de pginas Web, en los
distintos niveles de la estructura de la aplicacin. Un punto importante son los
lenguajes de programacin que se utilizarn en las paginas Web, ya que de estos
lenguajes se deriva el desempeo, rapidez y lgica que las paginas Web tendrn
en la ejecucin.
Cual es el mejor lenguaje de programacin Web?, en realidad no se puede hacer
una comparacin de que lenguaje de programacin es el mejor, lo que si se puede
decir, es que haciendo una integracin adecuada de diferentes lenguajes, se
puede crear una pgina o aplicacin Web de excelente calidad y con buenas
caractersticas.
a) HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite
describir hipertexto, es decir, texto presentado de forma estructurada y agradable,
con enlaces (hyperlinks) que conducen a otros documentos o fuentes de
informacin relacionadas, y con inserciones multimedia (grficos, sonido, etc.) La
descripcin se basa en especificar en el texto la estructura lgica del contenido
(ttulos, prrafos de texto normal, enumeraciones, definiciones, citas, etc) as como
los diferentes efectos que se quieren dar (especificar los lugares del documento
donde se debe poner cursiva, negrita, o un grfico determinado) y dejar que luego
la presentacin final de dicho hipertexto se realice por un programa especializado
(como Mosaic, Netscape, Internet Explorer, etc.).
b) DHTML
HTML Dinmico es cualquier pgina Web en la que los scripts en el lado del
cliente cambian el HTML del documento, despus de que ste haya cargado
completamente, lo cual afecta a la apariencia y las funciones de los objetos de la
pgina.
DHTML no es precisamente un lenguaje de programacin. Ms bien se trata de
una nueva capacidad de la que disponen los navegadores modernos, por la cual
se puede tener un mayor control sobre la pgina que antes.
Cualquier pgina que responde a las actividades del usuario y realiza efectos y
funcionalidades se puede englobar dentro del DHTML, pero en este caso nos
referimos ms a efectos en el navegador por los cuales se pueden mostrar y
14
ocultar elementos de la pgina, se puede modificar su posicin, dimensiones,

color, etc.
DHTML nos da ms control sobre la pgina, gracias a que los navegadores
modernos incluyen una nueva estructura para visualizar en pginas Web
denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.
c) ASP
Active Server Pages (ASP) es un lenguaje que se ejecuta del lado servidor de
Microsoft para el desarrollo de pginas Web generadas dinmicamente, se ha
comercializado como un anexo a Internet Information Services (IIS)
Descripcin: La tecnologa ASP est estrechamente relacionada con el modelo
tecnolgico de su fabricante. Intenta ser solucin para un modelo de programacin
rpida ya que programar en ASP es como programar en Visual Basic, por
supuesto con muchas limitaciones.
Se facilita la programacin de sitios Web mediante varios objetos integrados,
como por ejemplo un objeto de sesin basada en cookies, que mantiene las
variables mientras se pasa de pgina a pgina.
d) JAVA SCRIPT
JavaScript es un lenguaje de programacin interpretado, es decir, que no requiere
compilacin, utilizado principalmente en pginas Web, con una sintaxis semejante
a la del lenguaje Java y el lenguaje C.
Al igual que Java, JavaScript es un lenguaje orientado a objetos propiamente
dicho, ya que dispone de Herencia, si bien sta se realiza siguiendo el paradigma
de programacin basada en prototipos, ya que las nuevas clases se generan
clonando las clases base (prototipos) y extendiendo su funcionalidad.
Todos los navegadores modernos interpretan el cdigo JavaScript integrado
dentro de las pginas Web.
El lenguaje fue inventado por Brendan Eich en la empresa Netscape
Communications, que es la que desarroll los primeros navegadores Web
comerciales.
Tradicionalmente, se vena utilizando en pginas Web HTML, para realizar tareas
y operaciones en el marco de la aplicacin nicamente cliente, sin acceso a
funciones del servidor. JavaScript se ejecuta en el agente de usuario al mismo
tiempo que las sentencias van descargndose junto con el cdigo HTML.
15
e) CSS
Las hojas de Estilo en cascada (Cascading Style Sheets), CSS es un lenguaje
usado para definir la presentacin de un documento estructurado escrito en HTML
o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el
encargado de formular la especificacin de las hojas de estilo que servirn de
estndar para los agentes de usuario o navegadores.
La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de
un documento de su presentacin.
La informacin de estilo puede ser adjuntada tanto como un documento separado
o en el mismo documento HTML. En este ltimo caso podran definirse estilos
generales en la cabecera del documento o en cada etiqueta particular mediante el
atributo "style".
Pginas estticas y dinmicas
Las pginas estticas, se construyen con el lenguaje HTML, que no permite
grandes florituras para crear efectos ni funcionalidades ms all de los enlaces.
Estas pginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a
los desarrolladores como a los visitantes, ya que slo se pueden presentar textos
planos acompaados de imgenes y a lo sumo contenidos multimedia como
pueden ser videos o sonidos.
Las pginas dinmicas es cuando se incluye cualquier efecto especial o
funcionalidad y para ello es necesario utilizar otros lenguajes de programacin,
aparte del simple HTML.
Mientras que las pginas estticas todo el mundo se las puede imaginar y no
merecen ms explicaciones, las pginas dinmicas son ms complejas y
verstiles.
2.2.
Esquematizar la estructura general de una pgina Web
El diseo de una pgina o sitio Web se puede construir de varias formas, algunas
veces es por medio de lenguajes o software. Algunos de los lenguajes a utilizar se
encuentran el HTML, DHTML, ASP, JAVA SCRIPT, CSS, etc. En el caso de los
softwares se tienen el FrontPage, Dreamweaver, etc.
2.2.1. Plantillas para disear pginas Web

Las plantillas Web son pginas Web funcionales es decir Web pre-fabricadas que
incluye todo el cdigo e imgenes ya listos, que pueden ser personalizadas a
gusto del usuario para adaptarlas a sus necesidades:
16
Aadiendo textos e informacin

Modificando los colores
Sustituyendo o aadiendo imgenes
Adaptando el logotipo
Agregando enlaces
Para editar las plantillas Web puede usar cualquier programa editor: desde el
notepad hasta Dreamweaver, GoLive, etc.
Las plantillas Web se entregan en formato zip e incluyen todo el HTML y los
archivos fuentes originales. La mayora de ellas contienen llamativos efectos que
llevan en los enlaces. Se pueden aadir efectos a medida.
Las plantillas Web son el punto de partida ideal para disear sitios webs complejos
sin invertir grandes cantidades de dinero y tiempo.
Las plantillas Web son usadas para: crear webs personales o sitios corporativos,
aadir plantillas genricas a software de cdigo abierto (mambo, oscommerce,
php-nuke, foros phpbb, etc.) o presentaciones de eventos que necesitan de un
diseo ya construido, listo para aadir el contenido de su pgina Web.
Los pasos para crear una pgina o sitio Web a partir de plantillas:
1.
2.
3.
4.
5.
Eligir un diseo de un catlogo

Rellenar el formulario para adquirir la plantilla
Descargar al instante la plantilla adquirida
Editar las pginas de la plantilla Web con tu editor HTML preferido
Subir la Web modificada por el usuario a un servidor
2.2.2. Estructura general de una pgina Web

El HTML es un lenguaje que permite describir hipertexto, es decir, texto
presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de informacin relacionadas, y con
inserciones multimedia (grficos, sonido, etc.).
Con qu programa puedo escribir cdigo en HTML?.
Con cualquier editor de texto. Cuanto ms sencillo mejor. Valen el Editor del DOS,
el bloc de notas de WIN, o el Notepad de WIN95, solamente que se tiene que
grabar con la extensin HTML.
17
La estructura es:
La descripcin se basa en especificar en el texto la estructura lgica del contenido
(ttulos, prrafos de texto normal, enumeraciones, definiciones, citas, etc.) as
como los diferentes efectos que se quieren dar (especificar los lugares del
documento donde se debe poner cursiva, negrita, o un grafico determinado). Los
cdigos de formato que se incorporan al texto son posteriormente interpretados
por un programa especializado, que se conoce como navegador. Entre los
programas navegadores destacan como ms conocidos, Internet Explorer o
Netscape y entre otros.
Un fichero HTML es un fichero de texto con extensin HTM o HTML. En el, se
incluye la informacin que queremos presentar, pero debemos respetar una
estructura interna que interpretara nuestro navegador.
Un documento HTML, siempre comienza con la etiqueta <html>, y siempre termina
con </html>.
Dentro del documento (entre las etiquetas de principio y fin de html), hay dos
zonas bien diferenciadas: el encabezamiento y el cuerpo.
9
El encabezamiento, viene delimitado por las etiquetas <head>y </head>, que

sirve para definir diversos valores validos en todo el documento.
9 El cuerpo, viene delimitado por <body> y </body>, y en l reside la informacin
del documento.
La nica utilidad del encabezamiento en la que nos detendremos es la directiva
<title>, que permite especificar el ttulo de un documento HTML. Este ttulo no
forma parte del documento en s, no aparece, por ejemplo, al principio del
documento una vez que este se presenta con un programa adecuado, sino que
suele servir como ttulo de la ventana del programa que nos la muestra.
El lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta
significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o
<P> significa un prrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su
correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe
de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de
escribir en negrita. As que el HTML no es ms que una serie de etiquetas que se
utilizan para definir la forma o estilo que queremos aplicar a nuestro documento.
El cuerpo de un documento HTML contiene el texto que, con la presentacin y los
efectos que se decidan, se presentar ante el hiperlector. Dentro del cuerpo son
aplicables todos los efectos que se van a mencionar en el resto de esta gua.
Dichos efectos se especifican exclusivamente a travs de directivas. Esto quiere
decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el
18
fichero fuente no tienen ningn efecto a la hora de la presentacin final del

documento.
En resumen, la estructura bsica de un documento HTML queda de la forma
siguiente:
19
<html>
<title>Ttulo</title>
<head>
</head>
<body>
Texto del documento, grficos, enlaces, etc.
</body>
</html>
2.3.
Inicio de pgina
Ttulo de un documento HTML
Cabecera
Final de cabecera
Cuerpo de pgina
Final del cuerpo de pgina
Final de pgina
Utilizar etiquetas en una pgina Web
El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de

texto destacado de una forma especial que permiten la definicin de las distintas
instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas
estructuras del lenguaje. A estas marcas las denominaremos etiquetas y sern la
base principal del lenguaje HTML. En documento HTML ser un fichero de texto
con etiquetas que variarn la forma de su presentacin.
Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor
que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de
la etiqueta.
Algunos cdigos utilizados son:
<HTML> </HTML>
Identifica el contenido del documento con el

cdigo Hyper Text Markup Language
<TITLE> </TITLE>
Contiene el ttulo de la pgina, la cual se

observa en la barra de ttulo.
Alberga informacin de cabecera del
documento.
Establece el alcance del cuerpo del
documento.
Coloca en el centro de la pgina (alineacin
horizontal).
Incluye el color del fondo de la pgina web.
Visualiza el texto como cabecera con tamaos
crecientes y saltos de lnea.
Especifica un elemento de una lista (tipo
vieta).
<HEAD> </HEAD>
<BODY> </BODY>
<CENTER> </CENTER>
<BODY BGCOLOR=COLOR>
<HN> <H1> <H2> </H1> </H2>
<LI> </LI>
<P> </P>
<BR> </BR>
<FONT COLOR=COLOR>
<B> </B>
<I> </I>
<U> </U>
<HR> <SIZE=n WIDTH=m> </HR>
Definicin de un prrafo.
Inserta un salto de lnea.
Incluye el color de la letra.
Pone en negrita el texto.
Pone en cursiva o itlica el texto.
Visualiza el texto subrayado.
Dibuja una lnea horizontal con grosor n y
ancho (largo) m
Coloca el prrafo con una alineacin
justificada.
</P Coloca el prrafo con una alineacin hacia la
izquierda.
Coloca el prrafo con una alineacin hacia la
derecha.
<P ALIGN=JUSTIFY>
</P ALIGN=JUSTIFY>
<P
ALIGN=LEFT>
ALIGN=LEFT>
<P ALIGN=RIGHT>
</P ALIGN=RIGHT>
2.4.
Establecer vnculos e hipervnculos
Una de las principales caractersticas del HTML, es la posibilidad de enlazar con

documentos que pueden estar en cualquier punto de la red. Esto se realiza a
travs de los hiperenlaces.
2.4.1. Definicin
Un hipervnculo (tambin llamado enlace, vnculo, o hiperenlace) es un
elemento de un documento electrnico que hace referencia a otro recurso, por
ejemplo, otro documento o un punto especfico del mismo o de otro documento.
Combinado con una red de datos y un protocolo de acceso, un hiperenlace
permite acceder al recurso referenciado en diferentes formas, como visitarlo con
un agente de navegacin, mostrarlo como parte del documento referenciador o
guardarlo localmente.
2.4.2. Tipos de hipervnculos

Hay varios tipos de enlaces los cuales son: Pgina a pgina, Pgina a documento,
Dentro de la misma pgina y a correo electrnico.
Enlace de pgina a pgina:
La etiqueta que se usa para designar un hiperenlace es:
<a href="direccin"> texto </a>
<A HREF=URL>
</A>
En ella se escribe, entre comillas, la direccin de la pgina con la que queremos
enlazar y, entre las etiquetas, el texto sobre el que se da clic para acceder al
20
enlace. Este texto aparecer con un color especial, que podremos definir nosotros,
y subrayado.
Ejemplo:
<a href="http://www.altavista.com/">Conceptos</a></p>
21
Enlace de pgina a documento:

La etiqueta que se utiliza para realizar en hiperenlace es:
<a href="nombre.extensin">texto</a>
Se emplea para aplicar un hipervnculo con un archivo de cualquier tipo, es decir,
puede ser un documento elaborado en PowerPoint, Word, Excel, flash, etc.
Ejemplo:
<a href=clase.ppt>datos</a>
Enlace dentro de la misma pgina:
Puede ser interesante establecer hiperenlaces entre partes de una misma pgina,
ya sea porque sta sea muy extensa o para facilitar el movimiento dentro de la
pgina.
En este tipo de enlaces internos, la "direccin" que declararemos en HREF ir
precedida por el signo #. En lugar de una direccin, lo que escribiremos ser una
marca, a modo de recordatorio del sitio de la pgina donde ir el enlace. Por
ejemplo, si queremos hacer un enlace interno que nos lleve al final de la pgina,
podemos hacer:
<a href="#final">Ir al final</a>
Hemos decidido poner como marca la palabra "final", para que nos recuerde a
dnde va el enlace y un texto suficientemente explicativo.
Otra forma de realizarlo es por ejemplo:
<a name="Hola">Hola</a>
<a href="#Hola">Hola</a>
Enlace a correo electrnico:
Se emplea para realizar un hiperenlace con un correo electrnico, el cdigo es:
<a href=mailto:correo>texto</a>
Ejemplo:
<a href="mailto:berthaevelia@torrestorres.mitmx.net">Conceptos</a>
2.5.
Manipular formularios en una pgina Web
La mayora de las pginas Web que desean incluir una interactividad con los
usuarios adicionan formularios.
22
2.5.1. Definicin de formularios

Un formulario HTML es una seccin de un documento que incluye contenido
normal, cdigo, elementos especiales llamados controles (cuadros de texto,
casillas de verificacin (checkboxes), botones de accin (radio buttons), menes,
etc.), y rtulos (labels) en esos controles.
Los usuarios normalmente "completan" un
formulario modificando sus controles
(introduciendo
texto,
seleccionando
objetos de un men, etc.), antes de enviar
el formulario a un agente para que lo
procese como un servidor Web o un
servidor de correo, etc.
2.5.2. Controles de un formulario
Los usuarios interaccionan con los formularios a travs de los llamados controles.
El "nombre de control" de un control viene dado por su atributo name. El "campo
de accin" o alcance del atributo name de un control contenido en un elemento
FORM es el elemento FORM.
Cada control tiene tanto un valor inicial como un valor actual, que son ambos
cadenas de caracteres. En general, el "valor inicial" de un control puede
especificarse con el atributo value del elemento de control. Sin embargo, el valor
inicial de un elemento TEXTAREA viene dado por sus contenidos, y el valor inicial
de un elemento OBJECT de un formulario est determinado por la implementacin
del objeto (es decir, se sale fuera del alcance de esta especificacin).
El "valor actual" del control se hace en primer lugar igual al valor inicial. A partir de
ese momento, el valor actual del control puede ser modificado a travs de la
interaccin con el usuario y mediante scripts.
El valor inicial de un control no cambia. As, cuando se reinicializa el formulario, el
valor actual de cada control se reinicializa a su valor inicial. Si el control no tiene
un valor inicial, el efecto de una reinicializacin del formulario sobre ese control es
indefinido.
Cuando se enva un formulario para su procesamiento, para algunos controles se
empareja su nombre con su valor actual, y estas parejas se envan con el
formulario. Aquellos controles cuyas parejas nombre/valor se envan se llaman
controles con xito.
HTML define los siguientes tipos de controles:

Cuadro de texto: Los autores pueden crear dos tipos de controles que permiten
a los usuarios introducir textos. El elemento INPUT crea un control de entrada
de una sola lnea, y el elemento TEXTAREA crea un control de entrada de
varias lneas. En ambos casos, el texto introducido se convierte en el valor
actual del control.
Botones: Los autores crean botones con el elemento button o el elemento
input. Se pueden crear tres tipos de botones:
9 botones de envo (submit buttons): Cuando se activa, un botn de envo
enva un formulario. Un formulario puede contener ms de un botn de
envo.
9 botones de reinicializacin (reset buttons): Cuando se activa, un botn
de reinicializacin reinicializa todos los controles a sus valores iniciales.
9 botones pulsadores (push buttons): Los botones pulsadores no tienen
un comportamiento por defecto. Cada botn pulsador puede tener
asociados scripts en el lado del cliente a travs del atributo event del
elemento. Cuando ocurre un evento (p.ej., el usuario aprieta el botn, lo
suelta, etc.), se acciona el script asociado.
9 Los autores deberan especificar el lenguaje de programacin del script
de un botn pulsador a travs de una declaracin de scripts por defecto.
Casillas de verificacin (checkboxes):Son interruptores de encendido/apagado
que pueden ser conmutados por el usuario. Una casilla de verificacin est
"marcada" cuando se establece el atributo checked del elemento de control.
Cuando se enva un formulario, solamente pueden tener xito los controles de
casillas de verificacin que estn marcadas.
Botones de opcin (radio buttons): Los radiobotones son como las casillas de
verificacin, excepto en que cuando varios comparten el mismo nombre de
control, son mutuamente exclusivos: cuando uno est "encendido", todos los
dems con el mismo nombre se "apagan". Para crear un control de radiobotn
se usa el elemento INPUT.
Cuadro desplegable: Los menes ofrecen al usuario opciones entre las cuales
elegir. El elemento SELECT crea un men, en combinacin con otros
elementos.
Seleccin de ficheros (file select): Este tipo de control permite al usuario elegir
ficheros de modo que sus contenidos puedan ser enviados con un formulario.
Se usa el elemento INPUT para crear un control de seleccin de ficheros.
23
2.6.
Manipulacin de tablas en una pgina Web
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos

alojar distintos contenidos.
En un principio nos podra parecer que las tablas son raramente tiles y que
pueden ser utilizadas principalmente para listar datos como agendas, resultados y
otros datos de una forma organizada.
Una tabla nos permite organizar y distribuir los espacios de la manera ms optima.
Nos puede ayudar a generar texto en columnas, prefijar los tamaos ocupados por
distintas secciones de la pgina o poner de una manera sencilla un pie de foto a
una imagen.
Las tablas son definidas por las etiquetas <table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e
imgenes que darn forma y contenido a la tabla.
Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas
lneas es definida por otra etiqueta y su cierre: <tr> y </tr>
Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas
celdas ser definida por otro par de etiquetas: <td> y </td>. Dentro de estas
etiquetas ser donde coloquemos nuestro contenido.
La estructura de tabla se muestra en el siguiente ejemplo:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
</tr>
</table>
El resultado:
Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2
24
Ejemplo:
Cdigo HTML correcto que permite la construccin de una tabla:
<HTML>
<TABLE BORDER=10>
<TR>
<TD>Nmero de lista <TD> Nombre <TD> Materia </TH>
<TR>
<TD> 10 <TD> Mara Lpez <TD> Submdulo 3
<TR>
<TD> 12 <TD> Juan Ruz <TD> Submdulo 2 </TD>
</TABLA>
</HTML>
El resultado:
2.7.
Manipulacin de objetos en una pgina Web
Sin duda uno de los aspectos ms vistosos y atractivos de las pginas Web es la
colocacin de objetos. La introduccin en nuestro texto de imgenes,
animaciones, sonidos, video, etc. puede ayudarnos a explicar ms fcilmente
nuestra informacin y ser algo ms esttico. El abuso no obstante puede
conducirnos a una sobrecarga que se traduce en una distraccin para el
navegante, quien tendr ms dificultad en encontrar la informacin necesaria.
El uso de objetos tambin tiene que ser realizado con cuidado porque aumentan el
tiempo de carga de la pgina, lo que puede ser de un efecto nefasto si nuestro
visitante no tiene una buena conexin o si es un poco impaciente. Por ello es
recomendable siempre optimizar las imgenes para Internet, haciendo que su
tamao en bytes sea lo mnimo posible, para facilitar la descarga, pero sin que ello
comprometa mucho su calidad.
2.7.1. Formatos de imgenes
JPEG: El comit JPEG (Joint Photographic Experts Group = Grupo de
Unin de Expertos en Fotografa) se utiliza en Internet por la extraordinaria
compresin que consigue (como se puede ajustar el nivel de compresin,
al crear el archivo se puede ajustar la relacin tamao/calidad de la
imagen). Adems admite tambin entrelazado (una imagen entrelazada se
25
ve en el navegador desde que empieza a descargarse, primero con poca

calidad, pero cada vez con ms detalle a medida que va llegando). El
nico inconveniente es que se trata de un formato de compresin con
prdida, por lo que nunca se puede recuperar la informacin original, y si
una imagen se edita varias veces, la calidad se va degradando cada vez
ms.
GIF: El Graphics Interchange Format = Formato de Intercambio de
Grficos, es una imagen que slo puede tener 256 colores distintos, lo que
no la hace recomendable para las fotografas, pero s para dibujos.
Adems, el tamao de los archivos es pequeo, el xito del formato GIF
fue inmediato y su uso se extendi por Internet.
PNG: Portable Network Graphics = Grficos de Red Porttiles, las
ventajas del formato PNG sobre el formato GIF son muchas: se trata de
un formato libre, sin prdida, que consigue mayor compresin que GIF
(alrededor de un 20%), con transparencia alfa (cada pixel puede tener su
propio nivel de transparencia), canal gamma (para ajustar el brillo) y
entrelazado.
MNG: Multiple-image Network Graphics = Grficos de Red con Mltiples
imgenes, fue creado por algunos de los autores de PNG y tuvo muy poco
xito
APNG: El Animated PNG se desarrollo como alternativa a MNG, aunque
el formato PNG rechaz la propuesta de formato APNG, en la actualidad
se intenta impulsar el uso de este formato.
Sintaxis para agregar imgenes es:

<IMG SRC=URL>
URL= C:/CECYTES.JPG
2.7.2. Tipos de animaciones

La animacin es un proceso utilizado para dar la sensacin de movimiento a
imgenes o dibujos. Para realizar animacin existen numerosas tcnicas que van
ms all de los familiares dibujos animados. Los cuadros se pueden generar
dibujando, pintando, o fotografiando los minsculos cambios hechos
repetidamente a un modelo de la realidad o a un modelo tridimensional virtual;
tambin es posible animar objetos de la realidad y actores.
Se puede adicionar animaciones de diferentes tipos como los dibujos animados,
stop motion, pixelacin, rotoscopa, animacin de recortes, movimientos de texto,
animaciones en flash, etc. A continuacin se especificarn los dos ltimos tipos de
animaciones.
26
Animar una imagen o hacer texto con movimiento: las personas que
trabajan tan slo con HTML al hacer pginas web y que quieren incorporar
un tipo simple de animacin en sus sitios. Una solucin fcil para hacer una
animacin con HTML es hacer uso de Marquee. Dicho cdigo es una de
esas etiquetas no estndar de HTML, que soportan los navegadores ms
comunes, pero que no estn comprendidas dentro de las especificaciones
de HTML. Sirve para animar elementos dentro de la pgina. En concreto
permite que el contenido que pongamos dentro de la etiqueta, ya sea texto,
fotografas, o ambos se desplace horizontalmente por la pgina.
Sintaxis para adicionar de texto e imagen:
<marquee>texto que se mueve</marquee>
Insertar una animacin Flash: Las animaciones flash (swf) son archivos
multimedia que cada vez estn ms extendidas en la Red debido a su
vistosidad. Este tipo de animaciones se utilizan muy menudo ya que
permiten realizar contenidos ms llamativos y pueden aportar numerosas
posibilidades interactiva.
Se utiliza el cdigo <object> para insertar dichas animaciones aunque

tambin se puede emplear para diferentes objetos dentro de la pgina,
como pueden ser archivos de audio, archivos de vdeo, imgenes, etc.
Las animaciones Flash se insertan del mismo modo que los archivos de
audio y de vdeo, a travs de la etiqueta <embed>, pero debido a que tiene
ms posibilidades de que se produzcan incompatibilidades entre los
distintos navegadores, necesita tambin de la etiqueta <object>.
Sintaxis para adicionar animaciones en flash:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf
lash.cab#version=6,0,40,0" width="200" height="100">
<param name="movie" value="ejemplo.swf">
<param name="quality" value="high">
<embed src="ejemplo.swf" width="200" height="100" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>
27
2.7.3. Tipos de archivos de sonido

a) Los archivos de sonido con prdida
Son aquellos que usan un algoritmo de compresin con prdida, es decir un tipo
de compresin que representa la informacin (por ejemplo una cancin), pero
intentando utilizar para ello una cantidad menor de informacin. Esto hace que sea
imposible reconstruir exactamente la informacin original del archivo.
Archivos de sonido con prdida:
MP3 o MPEG-1 Audio Layer 3: Es un formato de audio digital estndar
comprimido con prdida, la prdida de informacin del formato mp3 no es
audible por el odo humano, por tanto no distinguiremos la diferencia entre
un archivo de audio sin compresin y un archivo mp3.
ACC o Advanced Audio Coding: Es un formato de audio digital estndar
como extensin de MPEG-2 comprimido con prdida, y ofrece ms calidad
que mp3 y es ms estable para un mismo nmero de Kbps y un mismo
tamao.
Ogg: Es un formato de audio digital comprimido con prdida. Normalmente
los archivos Ogg estn comprimidos con el cdec Vorbis, que es un cdec
de audio libre que permite una mxima flexibilidad a la hora de elegir entre
la amplia gama de bitrates segn la complejidad de la transmisin de audio,
en la relacin calidad-bitrate, se encuentra parejo con MPEG-2 y en la
mayora de los bitrates es comparable al formato ACC.
Real Audio o RM: Es un formato de archivo pensado para las transmisiones
por internet en tiempo real, por ejemplo las radios que emiten online o
cuando un servidor tiene un archivo de sonido almacenado y nosotros lo
escuchamos sin que el archivo se cargue por completo ni se almacene en
nuestro ordenador, esto es posible gracias al proceso de Buffering que
bsicamente es recibir un paquete de sonido en nuestro reproductor en
este caso (Real Player) mientras el siguiente se almacena en la carpeta de
temporales hasta que sea requerido por el reproductor. Con este sistema
los archivos no pueden ser copiados.
WMA o Windows Media Audio: Es un formato de compresin de audio con
prdida aunque tambin existe este formato con compresin sin prdida. Y
est desarrollado bsicamente con fines comerciales para el reproductor
integrado en Windows, Windows Media Player. Est por debajo del nivel de
los anteriores formatos.
b) Los archivos de sonido sin prdida
Son aquellos que usando o no mtodos de compresin, representan la
informacin sin intentar utilizar menor cantidad de la informacin original. Hacen
posible una reconstruccin exacta de la informacin original.
28
Archivos de sonido con prdida:

AIFF o Audio Interchange File Format: significa Formato de Archivo de
Intercambio de Audio, es un estndar de formato de archivo de audio para
vender datos de sonido para ordenadores, usado internacionalmente por los
ordenadores Amiga y actualmente muy utilizado en los ordenadores Apple.
FLAC o Free Lossless Audio Codec: es otro cdec de compresin sin
prdida, y consigue reducir el tamao de un archivo de sonido original de
entre la mitad hasta tres cuartos del tamao inicial.
WAV o wave: Waveform Audio Format es un formato de audio digital sin
compresin que se emplea para almacenar sonidos en el ordenadores con
windows, es una formato parecido al AIFF pero tomando en cuenta
peculiaridades de intel.
MIDI: Interface Digital para Instrumentos Musicales, es considerado el
estndar para industria de la msica electrnica. es muy til para trabajar
con dispositivos como sintetizadores musicales tarjetas de Sonido.
Su extensin es .midi o .mid.
Sintaxis para adicionar archivos de sonido:
<bgsound src="ruta del archivo.extensin loop="-1">
2.7.4. Tipos de archivos de video

El objeto de video es una de las herramientas que permiten a los diseadores de
pgina Web construir sitios atractivos para sus clientes, adems de que en ciertas
ocasiones se requieren para complementar la informacin o para mejorar el
aprendizaje.
Algunos tipos de archivos de video que se pueden colocar en la pgina Web son
los siguientes:
WMV (Windows Media Video): es un nombre genrico que se da al conjunto de
algoritmos de compresin ubicados en el set propietario de tecnologas de
vdeo desarrolladas por Microsoft, que forma parte del framework Windows
Media.
MPG (Moving Pictures Group): es un tipo de archivo contenedor, dentro del
cual podemos colocar pistas de video, audio e incluso subttulos en ciertos
casos. Tanto el video como el audio pueden hallarse en un formato
determinado y con unas caractersticas determinadas (resolucin, framerate,
etc), y segn esas caractersticas diremos que nuestro MPG est en un
formato u otro.
3GP: es un contenedor multimedia o formato de archivos usado por telfonos
mviles para almacenar informacin de medios mltiples(audio y video). Este
29
formato de archivo, creado por 3GPP (3rd Generation Partnership Project), es

una versin simplificada del "ISO 14496-1 Media Format", que es similar al
formato de Quicktime. 3GP guarda video como MPEG-4 o H.263.
AVI (Audio Video Interleave): permite almacenar simultneamente un flujo de
datos de video y varios flujos de audio. El formato concreto de estos flujos no
es objeto del formato AVI y es interpretado por un programa externo
denominado cdec.
Sintaxis para adicionar animaciones en flash:
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
SRC="direccion_de_tu_video.wmv"
name="MediaPlayer1"
width="352"
height="288"
AutoStart="0"
showcontrols="1"
showpositioncontrols="1"
showaudiocontrols="1" showtracker="1" showdisplay="0" showstatusbar="0"
autosize="0"
showgotobar="0"
showcaptioning="0"
autorewind="0"
animationatstart="1"
transparentatstart="0"
allowscan="0"
enablecontextmenu="1"
clicktoplay="1"
invokeurls="0"
defaultframe="datawindow">
</EMBED>
Otra forma:
<embed type=application/x-mplayer2 src=c:/guerra.avi width=300 height=300>
</embed>
30
CDIGOS HTML
<HTML> </HTML>
<TITLE> </TITLE>
<HEAD> </HEAD>
<BODY> </BODY>
<CENTER> </CENTER>
<BODY BGCOLOR=COLOR>
<Hn> <H1> <H2> </H1> </H2>
<LI> </LI>
<P> </P>
<BR> </BR>
<FONT COLOR=COLOR>
<B> </B>
<I> </I>
<U> </U>
<HR> <SIZE=n WIDTH=m> </HR>
<P ALIGN=JUSTIFY>
</P ALIGN=JUSTIFY>
<P ALIGN=LEFT> </P ALIGN=LEFT>
Identifica el contenido del documento con el

cdigo Hyper Text Markup Language
Contiene el ttulo de la pgina, la cual se observa
en la barra de ttulo.
Alberga informacin de cabecera del documento.
Establece el alcance del cuerpo del documento.
Coloca en el centro de la pgina (alineacin
horizontal).
Incluye el color del fondo de la pgina web.
Visualiza el texto como cabecera con tamaos
crecientes y saltos de lnea.
Especifica un elemento de una lista (tipo vieta).
Definicin de un prrafo.
Inserta un salto de lnea.
Incluye el color de la letra.
Pone en negrita el texto.
Pone en cursiva o itlica el texto.
Visualiza el texto subrayado.
Dibuja una lnea horizontal con grosor n y ancho
(largo) m
Coloca el prrafo con una alineacin justificada.

izquierda.
<P ALIGN=RIGHT>
</P ALIGN=RIGHT>
derecha.
<IMG
SRC=C:/CECYTES.JPG Inserta una imagen
WIDTH=250 HEIGHT=300>
<TABLE BORDER=10>
<TR>
<TH>Nmero de lista <TH> Nombre <TH> Materia </TH>
Insertar tabla
<TR>
<TD> 12 <TD> Juan Ruz <TD> Submdulo 2 </TD>
</TABLA>
<marquee>texto que se mueve</marquee>
Texto con movimiento
<bgsound src=c:/atodo.mid loop=-1>
Agregar sonido
<embed
type=application/x-mplayer2
width=300 height=300>
</embed>
src=c:/guerra.avi
<object
classid=clsid:D27CDB6E-AE6D-11CF-96B8444553540000 width=300 height=300>
<param name=movie value=c:/animacion.swf>
</object>
Adicionar video
Pelicula de flash
31
Vnculos e Hipervnculos
9 Enlace de pgina a pgina
<a href="direccin"> texto </a>
<A HREF=http://es.wikipedia.org/wiki/Colores_HTML> Referencia </A>
9 Enlace de pgina a documento

<a href="nombre.extensin">texto</a>
<a href=clase.ppt>datos</a>
9 Enlace dentro de la misma pgina
<a name=final> </a>
<A NAME="INICIO"> </A>
32
<a href="#final">Ir al final</a>

<A HREF="#Inicio"> Ir a inicio </a>
9 Enlace a correo electrnico

<a href=mailto:correo>texto</a>
<a href="mailto:berthaevelia@torrestorres.mitmx.net">Conceptos</a>
Formularios
9 Construir un formulario
<form
action="mailto:berthaevelia@torrestorres.mitmx.net"
enctype="text/plain"> </form>
method="post"
9 Cuadro de texto
Nombre <input type="text" name="nombre" size="40" maxlength="100">
Email <input type="text" name="email" size="25" maxlength="100"
value="@hotmail.com">
9 Texto largo
<textarea name="comentario" rows="10" cols="40">Anotar </textarea>
9 Listas de opciones
<select name="Estacin">
<option value="1"> Primavera </option>
<option value="2"> Verano </option>
</select>
9 Botones de radio
<input type="radio" name="estacin" value="1">Primavera
<input type="radio" name="estacin" value="2" checked>Verano
9 Cajas de validacin
<input type="checkbox" name="recibir" checked> Deseo recibir publicidad
9 Botones de envo
<input type="submit" value="Enviar">
9 Botones de borrado
<input type="reset" value="Borrar">

Unidad 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unidad 2

Uploaded by

Copyright:

Available Formats

ApuntesdelMduloII,SubmduloIII

COLEGIO DE ESTUDIOS CIENTFICOS Y

Mdulo II. Creacin de productos multimedia a travs de

Submdulo III. Elaboracin de Pginas Web.

SONORA, SEPTIEMBRE 2010

MANEJAR LOS ELEMENTOS BSICOS DE UN LENGUAJE UTILIZABLE EN

Definir los contenidos de la pgina Web

Definir los contenidos de la pgina Web

2.1.1. Conceptos generales

ejemplo, una pgina de la Web). Su estructura se basa en partes fijas y partes

.gob (en algunos pases .gov)

Existen otras nuevas jerarquas recientemente creadas y an no implementadas:

Cada parte se separa por puntos.

Las informaciones que transitan en la red son fragmentadas a la salida en

instantneo, a diferencia del correo normal, y adems muy barato. Podemos

Los navegadores mayormente utilizados hoy en da son Netscape Communicator,

Aplicaciones en el lado del cliente: el cliente Web es el encargado de

Algunos servidores Web importantes son:

servicios de correo electrnico basados en Web y sitios que proporcionan datos de

Tipos de sitios Web

Sitio archivo: usado para preservar contenido electrnico valioso

Diferencia entre sitio Web y pgina Web

2.1.2. Definir objetivos de la pgina Web

El segundo objetivo de una Web debe ser que te localicen o encuentren

El tercer objetivo y el ms difcil de lograr es crear una comunidad dinmica en

2.1.3. Definicin de contenidos para la pgina Web

2.1.4. Lenguajes utilizables en la creacin de pgina Web

ocultar elementos de la pgina, se puede modificar su posicin, dimensiones,

Esquematizar la estructura general de una pgina Web

2.2.1. Plantillas para disear pginas Web

Aadiendo textos e informacin

Eligir un diseo de un catlogo

2.2.2. Estructura general de una pgina Web

El encabezamiento, viene delimitado por las etiquetas <head>y </head>, que

fichero fuente no tienen ningn efecto a la hora de la presentacin final del

Utilizar etiquetas en una pgina Web

El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de

Identifica el contenido del documento con el

Contiene el ttulo de la pgina, la cual se

Establecer vnculos e hipervnculos

Una de las principales caractersticas del HTML, es la posibilidad de enlazar con

2.4.2. Tipos de hipervnculos

Enlace de pgina a documento:

Manipular formularios en una pgina Web

2.5.1. Definicin de formularios

HTML define los siguientes tipos de controles:

Manipulacin de tablas en una pgina Web

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos

Manipulacin de objetos en una pgina Web

ve en el navegador desde que empieza a descargarse, primero con poca

Sintaxis para agregar imgenes es:

2.7.2. Tipos de animaciones

Se utiliza el cdigo <object> para insertar dichas animaciones aunque

2.7.3. Tipos de archivos de sonido

Archivos de sonido con prdida:

2.7.4. Tipos de archivos de video

formato de archivo, creado por 3GPP (3rd Generation Partnership Project), es

Identifica el contenido del documento con el

Coloca el prrafo con una alineacin hacia la

9 Enlace de pgina a documento

<a href="#final">Ir al final</a>

9 Enlace a correo electrnico

You might also like