MANUAL DE PAGINA WeB HTML PDF

ACADEMIAS 2019-A
COLEGIO DE BACHILLERES DEL

ESTADO DE CAMPECHE
MANUAL DEL DOCENTE
ELABORACIÓN DE PÁGINAS WEB
PRIMER PARCIAL
BLOQUE I: UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO.
BLOQUE II: MANEJAR LOS ELEMENTOS BÁSICOS DE UN

LENGUAJE UTILIZABLE EN LA ELABARACIÓN DE PÁGINAS WEB.
SEGUNDO PARCIAL
BLOQUE III: DISEÑAR UNA PÁGINA WEB CON UN SOFTWARE DE APLICACIÓN.
BLOQUE IV: PUBLICAR PÁGINAS WEB.
CICLO 2019-A
PRIMER PARCIAL
BLOQUE I: UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO.
Antes de iniciar con el diseño de páginas Web, es importante conocer alguno conceptos importantes
que se utilizan para el diseño de un sitio web.
1.1 TERMINOLOGÍA BÁSICA:

World Wide Web:
El servicio World Wide Web (La Telaraña Mundial), también conocido como WWW o simplemente
Web, es un Sistema de Información distribuido por Internet basado en la tecnología
hipertexto/hipermedia, que proporciona una interface común a los distintos formatos de datos
(texto, gráficos, vídeo, audio, etc.) y a los servicios de Internet existentes (FTP, telnet, etc.). Todo
esto hace que el servicio Web sea el servicio de más utilizado en Internet.
Página web:
Se conoce como página web al documento que forma parte de un sitio web y que suele contar con
enlaces (también conocidos como hipervínculos o links) para facilitar la navegación entre los
contenidos.
Las páginas web están desarrolladas con lenguajes de marcado como el HTML, que pueden ser
interpretados por los navegadores. De esta forma, las páginas pueden presentar información en
distintos formatos (texto, imágenes, sonidos, videos, animaciones), estar asociadas a datos de estilo
o contar con aplicaciones interactivas.
¿Qué es un sitio web?

Un sitio web (en inglés: website), es un conjunto de páginas HTML relacionadas entre sí por
hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir de
una dirección URL de su página índice (Index) y con una unidad de contenido y de estilo gráfico.
Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web.
Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a partir
de una página principal o índice se enlazan el resto de páginas.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 2

URL:
Localizador de Recursos Uniformes (Uniform Resource Locator), en otras palabras a dirección global
de documentos y de otros recursos de Internet.
Protocolo de Transferencia de Hipertexto, su

función principal es transferir hipertexto de
forma segura en la Web, gracias a este
protocolo el usuario y los servidores pueden Dirección IP, nombre de la empresa,
interactuar. personal que hace referencia en
Internet
Tipo de dominio, educativo, comercial

http://www.cobacam.edu.mx gubernamental etc., así como las siglas
del país que pertenece.
La World Wide Web, mejor conocido

como telaraña mundial, es un
conjunto de protocolos que permite
de forma sencilla la consulta de
archivos de hipertexto.
1.2 TIPOS DE SITIOS WEB:

La Web ofrece ejemplos de casi todas las estrategias de comunicaciones conocidas por la
humanidad, exitosas o no. Pero no todas las páginas Web que se encuentre en línea se pueden
aplicar a su situación. En primer lugar; los recursos de diferentes editores de la Web pueden disentir
drásticamente, desde un individuo que crea un sitio para publicar fotos familiares, hasta una
empresa de gran envergadura que crea un sitio de comercio en línea. En segundo lugar, existen
varios tipos de sitio Web y no todas las lecciones sobre cómo crear un sitio Web de un tipo se
aplican los demás tipos.
La mayoría de páginas Web son los sitios Web personales, temáticos, comerciales y de
entretenimiento.
SITIOS PERSONALES
Los sitios Web personales pueden tener muchas metas. A menudo, su fin es solo compartir algo
sobre usted con los compañeros del trabajo, amigos o familiares. Las páginas Web personales son
una gran forma para que unas personas conozcan a otras con intereses similares y para que las
personas de una cultura aprendan sobre culturas. También puede usar un sitio Web personal para
compartir fotos familiares y acontecimientos como una carta de día festivo que siempre está
actualizada.
Crear un sitio Web personal es muy divertido y de buena práctica para poder hacer algún otro
trabajo. Pero los sitios Web personales a menudo se dejan tal como han sido creados, luego de que
la emoción creativa se acaba. ¡Sea diferente, mantenga su sitio Web actualizado!
Conforme los sitios Web personales evolucionan, sus creadores tienden a añadir más información
acerca de un solo interés, en cuyo caso las páginas pueden convertirse en sitios Web temáticos. En
otros casos, el creador del sitio Web añade más información sobre metas y logros profesionales, en
cuyo caso la página Web se convierte en una especie de sitio Web comercial.
SITIOS TEMÁTICOS
Una página temática de inicio es un recurso sobre un tema específico. Un tema puede ser in interés
o un grupo voluntario al cual pertenece el autor, en cuyo caso la página puede crecer con el tiempo
y convertirse en algo muy parecido a un sitio web comercial. También su página Web temática
puede estar dedicada a cualquier interés, causa, motivo, obsesión o locura que tenga. En el sentido,
la Web es como la prensa amarilla descontrolada, la cual les permite a todos decir lo que sea,
algunas veces ofrece cosas de gran valor, pero la mayoría del tiempo, no.
El área de interés temática mejor respaldada de la Web es el área de la publicación misma.
SITIOS COMERCIALES
Los sitios Web comerciales constituyen el peso fuerte de la Web y se les dedica una cantidad
tremenda de tiempo, energía y dinero. Los sitios Web comerciales cubren una gran variedad de
estilos porque sus cometidos y sus recursos varían mucho.
La primera pregunta que se debe hacer sobre un sitio Web comercial es “¿Quién puede acceder a
él?” Algunos sitios son pensados para la World Wide Web, pero están protegidos con una
contraseña o con algún otro método para restringir el acceso; otros incluso están en redes privadas
y son inaccesibles a personas ajenas. Estas redes inaccesibles indican que están “detrás de un
firewall o barrera de protección. Cualquier página Web que no sea accesible a todo el mundo se
considera que está en una intranet o extranet.

SITIOS DE ENTRETENIMIENTO
El entretenimiento es una de las razones más importantes por las cuales la gente usa la Web, el
número de sitios de entretenimiento está aumentando. Páginas humorísticas y servicios tales como
los calabozos multiusuarios (MUD) y los servicios de juegos compartidos ahora se están
expandiendo por la Web.
Las altas expectativas que la gente tiene de los sitios de entretenimiento pueden hacer que estos
sitios estén entre los más difíciles de crear. Estas son algunas sugerencias para crear sitios de
entretenimiento:
- No empiece aquí. No intente iniciarse en publicación de sitios Web creando uno de
entretenimiento. Es una tarea muy exigente. Trate con otro tipo de sitio primero y, luego, ábrase
camino hasta llegar al de entretenimiento.
- Manténgalo fresco. ¿Qué tan divertido es un chiste la segunda vez que lo escucha? Es necesario
que actualice rápidamente el contenido de su sitio o, de lo contrario, permita a los participantes
brindar el contenido interactuando entre sí, ninguna de las dos opciones es fácil.
- Aproveche la tecnología. La interactividad es también clave para el entretenimiento, lo cual
significa ir más allá de HTML y de los gráficos estáticos. Necesita usar al menos alguna tecnología
avanzada de la Web para crear un sitio Web fresco e interesante.
- Deje que la tecnología le ayude. La tecnología puede darle ideas muy divertidas. Intente usar Java
para crear rutinas animadas al estilo de los Tres Chiflados o use ActiveX para crear un ambiente de
realidad virtual que incluya algo parecido
1.3 ELEMENTOS BÁSICOS DE DISEÑO WEB:

ILUSTRACIÓN
La ilustración o imagen es uno de los recursos más usados en el diseño de páginas web, pues al no
estar sometidas férreamente a un modelo natural, permiten al ilustrador dibujar libremente el
motivo que más se adapte a la composición de su sitio web, en una página se pueden insertar
imágenes con los formatos: JPG, GIF, PNG entre otros, según las especificaciones del sitio.
Para insertar una imagen basta con utilizar la etiqueta IMG y el e atributo SRC.
La etiqueta <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
Donde SRC corresponde a la ubicación donde se encuentra la imagen, normalmente se ubica en la

carpeta denominado IMAGES, (en este caso "immagine.gif"). Como hemos señalado, esta etiqueta
es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
TIPOGRAFÍA
Una tipografía, es un conjunto de signos, referenciado al tipo de diseño que se está realizando, su
característica principal es el tamaño, apariencia y otros atributos asociados a todo el conjunto, y una
asignación de signos abstractos por cada carácter.
Es importante usar fuentes llamativas pero sencillas de leer.
También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes
del contenido y del texto.
Algunas fuentes que se puede utilizar en HTML es:
Font Face (hace referencia al tipo de letra que se insertara en el documento, Helvética, Tahoma
Arial etc.)
Font Size (Hace referencia al tamaño de la fuente que se insertará en el documento)
Para insertar un texto en el documento Web se utiliza la etiqueta Font:
<font face="Arial, Helvetica, sans-serif" size="+1">Mi Primera página</font>

Atributos:
Face: Nombre de la fuente
Color: color del texto, número hexadecimal o color predefinido
Size: tamaño del texto.
TEORÍA DEL COLOR

Esta parte es únicamente para que considere los colores a utilizar en su página, pues no se le puede
poner cualquier color solo por el hecho de que alguno sea nuestro color favorito.
Combinación de tonos suaves sobre fondos fríos, nos da el efecto de tranquilidad.
Colores vivos combinados con negro, blanco o gris perla, da el efecto de alta tecnología.
Unión de rojos, magentas y naranjas, produce excitación.
Tonos suaves de azules, verdes y marrones, da la sensación de limpieza.
Combinación de naranjas y rojos, amarillos, marrones y rosas, produce calor.
Para más información consulte la página: http://www.webusable.com/coloursMix.htm

MULTIMEDIA
Multimedia en sitios web se refiere al uso de la mezcla de medios (texto, imágenes, video, audio y
animación) para comunicar un mensaje.
En web, el mensaje puede ser mediante una presentación narrativa lineal como en una película que
no permite al usuario alterar la narración, o puede ser no-linea ofreciendo al usuario interactuar con
el medio.
La elección de cuál multimedia utilizar siempre estará sujeta a las necesidades de los clientes y como
ellos mejor satisfacen estas necesidades de información y entrega de contenido. Además de
considerar las características de su propio negocio.
Algunas formas comunes de publicar contenido con multimedia en web son:

- Animaciones de GIF
- Flash
- Streaming de audio y streaming de video
Los formatos de audio comunes que se puede insertar en una página web son: MP3, WAV y MIDI.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir
sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A través del atributo SRC hay que especificar la ruta y el nombre del archivo de audio.
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta
que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo
para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta
de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay
que insertar nada.
A través del atributo SRC hay que especificar la ruta y el nombre del archivo de vídeo.

BOTONES
Los botones gráficos son elementos exclusivos de las
aplicaciones informáticas, en las que tienen básicamente
la misión de capturar eventos realizados por el usuario
para lanzar acciones de respuesta adecuadas.
Es común ver en las páginas web botones que permiten al usuario interactuar con la aplicación,
informándole de la acción que se va a producir si pincha sobre ellos. Funcionan de esta forma como
iconos ampliados, que permiten ejercer las mismas funcionalidades que estos elementos pero sin
estar tan limitados en aspectos como formas, tamaños, colores, etc.
También es frecuente utilizar los botones gráficos para sustituir a los botones típicos de los
formularios. Cuando aparecieron los formularios sus botones de acción eran todos rectangulares, de
color gris y con el texto en negro, diseño que muchas veces se hacía demasiado aburrido con el
estilo general de la página. La solución a este problema de diseño fue la sustitución de estos
botones estándares por botones gráficos que realizaran las mismas funcionalidades, generalmente
apoyándose en lenguajes de cliente como JavaScript.
Posteriormente, con la aparición de las Hojas de Estilos en Cascada (CSS), fue posible configurar el
aspecto de los botones de formulario, aunque sólo admiten esta funcionalidad los navegadores más
recientes. A pesar de ello, el uso de botones gráficos a continuado, ya que sus posibilidades de
diseño que ofrecen son mucho mayores; como contrapartida, es necesario a veces un fuerte apoyo
de programación, ya que los botones gráficos no responden por si solos a los eventos propios de los
botones de formulario.
Otro uso común de los botones gráficos es el de representación de opciones en un menú de

navegación. Los sistemas de navegación suelen estar formados por enlaces textuales, a los que,
como mucho, se les cambia el estilo propio de este tipo de elementos (color azul y subrayado
cuando están inactivos, color morado y subrayado cuando han sido ya visitados). Este sistema es
muy efectivo, permitiendo configurar los textos como deseemos, trabajar cómodamente con capas
y DHTML, etc., pero presenta ciertas limitaciones que conviene evitar.
La forma normal de los botones gráfico es la rectangular (sobre todo la de los que sustituyen
botones de formulario), que a veces puede tener las esquinas redondeadas. También pueden
presentarse circulares o elípticos, trapezoidales, en forma de estrella, etc. Dentro de esta forma
primaria se incluye un texto corto (una o dos palabras) que indican la funcionalidad del botón.
BANNERS
Un banner es un anuncio en que habitualmente se presenta en una página web. Es el equivalente a
los anuncios de las vallas publicitarias del mundo real.
Los banners se suelen colocar en una página web para anunciar una empresa, producto o servicio,
cobrando el propietario del sitio web una cantidad variable por ello. El precio de colocar un banner
es variable, dependiendo fundamentalmente del tipo de página que lo presenta y del número de
visitantes de la misma, siendo la forma más habitual de contratación la de cantidad por miles de
impresiones (veces que se carga la página con el banner).
Un banner se presenta como una imagen que muestra información muy concreta sobre un producto
o servicio, imagen que al ser pulsada abre una nueva ventana del navegador conteniendo una
página web del sitio del anunciante, en la que el visitante puede obtener más información sobre el
producto ofrecido y, generalmente, comprarlo.
Físicamente, los banners son ficheros gráficos (imágenes), en formato GIF simple, JPG o PNG si son
estáticos, o en formato GIF animado o SWF si son animados (lo más frecuente). Su tamaño es
variable, aunque existen unas dimensiones que se han convertido en estándares de facto y que son

las que normalmente se utilizan para establecer el precio de la contratación de espacio para los
mismos.
LOGOS
Un logotipo es un distintivo o emblema formado por letras, abreviaturas, objetos gráficos, etc.,
peculiar de una empresa, marca o producto, a los que representa e identifica de forma unívoca.
Los logotipos, también conocidos como logos, son uno de los trabajos más importantes y difíciles
que puede realizar un diseñador gráfico, y representan un ejemplo perfecto de la esencia misma del
diseño, pues en un objeto único se concentran todas las consideraciones de comunicación, estilo y
técnica que se manejan para proyectos de mayor envergadura.
Para una empresa, producto o institución, el logotipo es una pieza clave de su identidad pública, ya
que la representa en todos y cada uno de los elementos comunicativos de la misma (sobres, tarjetas
de los empleados, publicaciones, publicidad, etc.). Es por lo tanto muy importante que el logotipo
simbolice lo más acertadamente la esencia e identidad propia de la empresa o producto.
Los logotipos no son elementos de diseños estáticos, fijos, sino que evolucionan con el tiempo para
adaptarse a las tendencias sociales, comerciales, culturales y técnicas de cada época concreta. Estos
cambios deben ser siempre muy sutiles, modificando apenas pequeños elementos del diseño del
logotipo (pequeños cambios en las formas o en la tipografía), ya que la personalidad propia del
mismo debe mantenerse siempre.

Un logotipo debe reunir una serie de características generales para ser funcional y efectivo. Entre
ellas podemos citar las siguientes:
 Debe corresponderse con a un tiempo: Su concepción y diseño debe estar inspirado en una
época, en una cultura. Posteriores cambios en sus elementos pueden ir adaptándolo a los
tiempos nuevos, pero deben ser tan imperceptibles que se conserve siempre su estilo
original.
 Debe ser simple: Los elementos gráficos que lo componen deben ser pocos, claros y
estilizados.
 Debe ser fácil de recordar: Su impacto visual debe ser inmediato y perdurable, un objetivo
difícil de cumplir en el ambiente de saturación visual en que vivimos.
 Debe ser único y diferenciador: La función clave de un logotipo es la de identificar. Su diseño,
sus colores y formas, deben ser únicas en el mercado, permitiendo que los espectadores lo
reconozcan inmediatamente y de forma inequívoca.
 Debe funcionar en diferentes medios: Su diseño deber permitir su correcta visualización en
medios impresos y en pantalla, en diferentes resoluciones y distancias, en color o en blanco
y negro.
 Debe ser coherente con el resto de la identidad corporativa: El logotipo ha de estar
perfectamente integrado con el resto de materiales que utilice la compañía para sus
comunicaciones: material de papelería, envoltorios, material promocional, la página web, los
anuncios televisivos y carteles, etc.
 Debe resistir el paso del tiempo: El logotipo debe ser funcional y válido independientemente
de las modas o gustos temporales de las diferentes épocas y movimientos sociales y
culturales.
HIPERVÍNCULOS
Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un
enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para
navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como
hiperenlaces, enlaces o links.
Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón
esté sobre el hipervínculo.
Dependiendo de cuál sea el destino, hacer clic en un hipervínculo puede hacer que ocurran varias
cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un
documento de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para
visualizarlo o de guardar el archivo.
Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por
donde queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que
ofrecerles un hipervínculo a nuestro correo electrónico.
TEMA 1.4. Tipos de lenguaje para desarrollo Web. (HTML, DHTML, ASP,JAVA SCRIPT,CSS)
HTML es un lenguaje sencillo pensado para presentar información en la WWW. HTML (HyperText
Markup Languaje), como su nombre indica es un lenguaje de marcas para la creación de
hipertextos. Por hipertexto entenderemos texto con una presentación agradable, con inclusión de
elementos multimedia (gráficos, video, audio) y con la presencia de hiperenlaces que permiten
relacionar otras fuentes de información en documentos hipertextos. Es el lenguaje utilizado para
representar documentos en la WWW (World Wide Web).
Como se ha dicho es un lenguaje de marcas ya que en el las instrucciones son trozos de texto
resaltados convenientemente que definirán la estructura lógica del documento. Por tanto un
documento HTML constará de texto que será el contenido y la información del documento y de
instrucciones HTML que resaltarán este contenido y le darán un formato fácil y agradable de leer y
con la posibilidad de relacionar documentos y fuentes de información mediante hiperenlaces.
El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que
permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un
lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en
cascada (CSS) y la jerarquía de objetos de un Document Object Model (DOM).
Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente
cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta
a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por
tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página
la misma para todos los usuarios.
En contraste, el término general "página web dinámica" lo usamos para referirnos a alguna página
específica que es generada de manera diferente para cada usuario, en cada recarga de la página o
por valores específicos de variables de entorno. Este término no debe ser confundido con DHTML.
Estas páginas dinámicas son el resultado bien de la ejecución de un programa en algún tipo de
lenguaje de programación en el servidor de la página web (como por ejemplo ASP.NET, PHP o Perl),
el cual genera la página antes de enviarla al cliente, o bien de la ejecución en la parte cliente de un
código que crea la página completa antes de que el programa cliente (usualmente, un navegador) la
visualice.
Active Server Pages (ASP), también conocido como ASP clásico, es una tecnología de Microsoft del
tipo "lado del servidor" para páginas web generadas dinámicamente, que ha sido comercializada
como un anexo a Internet Información Services (IIS).
La tecnología ASP está estrechamente relacionada con el modelo tecnológico y de negocio de su
fabricante. Intenta ser solución para un modelo de programación rápida ya que "programar en ASP
es como programar en Visual Basic Script con algunas ventajas específicas en entornos web.
Lo interesante de este modelo tecnológico es poder utilizar diversos componentes ya desarrollados
como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS,
por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.
JavaScript (abreviado comunmente "JS") es un lenguaje de programación interpretado, dialecto del

estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo,
débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de
un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque
existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en
aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio
(mayoritariamente widgets) es también significativo.
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del
lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen
semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web.
Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del
Document Object Model (DOM).
Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un
lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato)
de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas

webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de
documentos XML, incluyendo SVG y XUL.
La información de estilo puede ser adjuntada como un documento separado o en el mismo
documento HTML. En este último caso podrían definirse estilos generales en la cabecera del
documento o en cada etiqueta particular mediante el atributo "<style>".

BLOQUE II: MANEJAR LOS ELEMENTOS BÁSICOS DE UN LENGUAJE
UTILIZABLE EN LA ELABORACIÓN DE PÁGINAS WEB.
2.1 Introducción:
Para diseñar una página Web es importante tener conocimientos previos sobre el lenguaje HTML, y
sobre las herramientas a utilizar. Para comenzar sólo son necesarios dos elementos:
• Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los más adecuados
son los más sencillos (como por ej., el block de notas de Windows, o el notepad++). Si se utilizan
procesadores como el Word, se deben guardar los ficheros como 'Sólo Texto', para que no
introduzca órdenes de formateo, que pueden provocar errores al cargarlo en el navegador.
• Un visualizador o navegador del Web: Netscape, Microsoft Explorer, Mosaic, Opera, Mozilla
Firefox, Google Chrome etc.
El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será posteriormente
interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que
vayamos efectuando.
Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy conveniente
comenzar a hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML.
2.1.1 LENGUAJE HTML: es un lenguaje sencillo pensado para presentar información en la WWW.
HTML (HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la
creación de hipertextos. Por hipertexto entenderemos texto con una presentación agradable, con
inclusión de elementos multimedia (gráficos, video, audio) y con la presencia de hiperenlaces que
permiten relacionar otras fuentes de información en documentos hipertextos. Es el lenguaje
utilizado para representar documentos en la WWW (World Wide Web).
HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa
que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas
las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado
para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una
imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas
funciones, no podremos verlas.
2.1.2 MI PRIMER DOCUMENTO:

Es recomendable crear un directorio en su computadora para almacenar las páginas web que vaya
haciendo al aprender; y que practique un tiempo antes de poner páginas 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>Hola Mundo Web</H1></CENTER>
<HR>
Esta es mi primera página, <BR>Como el lenguaje HTML no es difícil, pronto estaré en
condiciones de hacer cosas más interesantes.
<P> Aquí va un segundo párrafo. </P>
</BODY>
</HTML>
3. Grabe este archivo con el nombre: Index.html

4. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su computadora.
Puede trabajar en local.
5. Elija "Archivo/Abrir página" en la barra de menú del navegador.
6. Seleccione el archivo Index.html que acaba de crear, y debe de ver la siguiente pantalla:

2.1.3 Características 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 términos para denominar a los elementos 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 continuación se muestra:
<marca [atributos]> ......................................[</marca>]
Hay marcas que se aplican a todo el documento HTML, o sólo 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 aplicación se especifica con la misma marca precedida de la barra inclinada hacia atrás
(/).
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.

Concatenación de marcas. Las marcas se pueden anidar o encadenar una a continuación de otra, de
forma que se pueden aplicar simultáneamente varias propiedades a una misma porción 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 líneas de código HTML, tiene
efectos idénticos, sean cuales sean las marcas concretas.
2.1.4 NORMAS FUNDAMENTALES DE HTML

 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 por ejemplo el Block de Notas de Windows.
 Igualdad de mayúsculas y minúsculas.

HTML no distingue entre mayúsculas y minúsculas en la especificación de marcas y sus atributos. Sin
embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en mayúsculas.
 No importan los tabuladores, ni los saltos de línea

Los visualizadores no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en blanco
extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados
uniformes y de buena presentación de manera bastante fácil.
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 línea.
 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 símbolos 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.

2.1.5 ESTRUCTURA BÁSICA DE UN DOCUMENTO
Un documento HTML, no es más 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>
 Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la
cabecera hay información del documento, que no se ve en la pantalla principal, y que precisa
las características del documento, principalmente el título del documento. El título del
documento se declara entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y
descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página
a su bookmark (o libro 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 carácter imprimible.
2.2 COMANDOS BÁSICOS DE HTML

A continuación se describen las marcas básicas de HTML que se pueden incluir en el cuerpo de un
documento HTML.
Definición de párrafos: P
La marca <P> sirve para separar párrafos en HTML. Deja un espacio en blanco entre párrafos
haciendo legible el texto de la página. En esta marca la etiqueta de fin es opcional.
Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos
modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que
puede tomar los valores siguientes.
• LEFT: el párrafo es justificado a la izquierda. Valor por defecto.
• CENTER: el párrafo es centrado.
• RIGHT: el párrafo es justificado a la derecha.
Salto de líneas: BR
La marca <BR> introduce un retorno de carro (o salto de línea) en el punto del documento en el que
es colocada. Es equivalente al punto y aparte de un texto normal.
Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.
Título de encabezado: H1
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan
para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con
/Hn>, donde n es un número de 1 a 6. Siendo el número indicativo del tamaño. El tamaño mayor es
el correspondiente al número 1.
<H1>Nivel de encabezado 1</H1>
Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de línea, aunque
no se le indique.
Estilo al texto:

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaño, color que se
desea que aparezca el texto.
Tipos de letras
Algunas de las marcas que permiten especificar la tipografía 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.
Tamaño del texto.
Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente:
<FONT SIZE="tamaño">Texto</FONT>
El comando <FONT> requiere la etiqueta de cierre.
HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto. Sin
embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real del
tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una Times
de 8.
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.
Consistía en tres números hexadecimales (números expresados en base 16) de dos dígitos cada uno.
Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores distintos. El primer
número 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 combinación de los colores rojo, verde, y azul se denomina RGB
(red - green - blue).
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”>
O en su caso en vez de utilizar el nombre del color en Ingles se puede poner números
hexadecimales.
Listas
Las listas en HTML proporcionan una forma de clasificar la información, y hacer que ésta sea más
inteligible por parte del visitante de las páginas.
Listas ordenadas: OL.
También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un número
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.
Cada elemento de la lista ordenada se identifica escribiéndolo 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 detrás de cada elemento de la lista.
Es posible especificar el tipo de numeración que se dará (números arábigos, números romanos,
letras, etc.), por defecto se sigue la numeración árabe.
Las listas numeradas pueden ser anidadas una dentro de otra.
Listas desordenadas: UL.

También 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 símbolo (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
También es posible en las listas desordenadas especificar el símbolo que va a aparecer delante de
cada elemento de la lista.
Las listas desordenadas también pueden ser anidadas una dentro de otra.
Listas de definición: DL.

A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para presentar la
información sin marcas, ni números, sino que utiliza los sangrados de los párrafos.
Las listas de definición están constituidas por términos y su subsiguiente definición.
La forma de implementar las listas de definición es con la marca <DL> de la siguiente forma:
<DL>
<DT> Nombre del termino
<DD> Definición del término
</DL>
Cada término de la lista de definición se indica con la marca <DT> y no sangrará, mientras que la
descripción del término se indica con la marca <DD> y sangrará hacia la derecha para resaltarla del
término.
Centrado de texto
Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando
<CENTER> ... </CENTER>.
Líneas horizontales
La marca <HR> permite trazar unas líneas horizontales para separar distintas secciones de una
página HTML.
Por defecto, las líneas 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
sensación de relieve.
Esta marca sólo requiere la etiqueta de comienzo.
Comentarios no visibles en la pantalla

A veces es muy útil escribir comentarios en el documento HTML sobre el código 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 símbolos: 
Ejemplo:

2.2.1 ENLACES

Los enlaces (o links) proporciona al que visita las páginas un mecanismo muy sencillo para moverse
entre distintos documentos, permitiéndole moverse en aquellos aspectos que considere más
importantes, mientras que desde el punto de vista del que crea las páginas 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:
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 página
2. Enlaces a otras páginas.
3. Enlaces a otras zonas de otras páginas.
Enlaces a otras zonas de la misma página

A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto
desde una posición 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.
Enlaces a otras paginas
Para enlazar a otro documento, es necesario conocer la ubicación exacta del documento que se
referenciará. Una ubicación, puede ser referenciada en forma relativa o absoluta
 Ubicación relativa:
Se indica especificando la posición del documento en la estructura de subdirectorios a partir de la
ubicación del documento actual. Sólo se puede usar para documentos ubicados en el mismo
ordenador.
Una referencia relativa a otro documento se hace usando el comando:
<A HREF="ubicación"> ... </A>
 Ubicación absoluta:
Se indica especificando el URL (uniform resurce locator) de la página que se está referenciando.
Los URL son una manera universal de especificar una dirección. La forma más básica de referenciar
un hypertexto es usar el comando:
<A href="http://ordenador/directorio/archivo"> ...
El ordenador indica la máquina donde se encuentra el documento. El directorio y archivo indican su
posición dentro de ese ordenador. Los URL tienen muchas formas distintas para referenciar distintos
objetos.
Enlace a una zona de otra página
Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la
página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.
2.2.2 TABLAS
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 alineación del contenido de la celda, y mucho más.
Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy amplia gama de
ejemplos.

Título de la tabla
Es conveniente que las tablas tengan un título que las identifique y aclare su contenido.
Aunque ese título 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>
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 pixeles 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.
Tamaño de la tabla
Por defecto el tamaño de la tabla viene dado por el texto o los gráficos 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>
Espacio entre las celdas

Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista
más 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 mínima en pixeles 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 pixeles de los bordes de cada celda.

Justificación 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>
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.
Celdas de diferentes tamaños.

Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño. Sin
embargo, es posible establecer los tamaños 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.
2.2.3 FRAMES (MARCOS)

Los FRAMES (marcos) es una técnica que se utiliza para subdividir la pantalla del visualizador en
diferentes ventanas, con la característica de que cada una de ellas se podrá manipular por separado,
es como si cada una de ellas fuera una página Web. Esto es muy útil para, por ejemplo, para mostrar

permanentemente en una ventana los diferentes contenidos de nuestra página y, en la otra mostrar
el contenido seleccionado.
Para definir las diferentes subventanas o FRAMES su utilizan las marcas:
<FRAMESET> </FRAMESET> y <FRAME>.
Con <FRAMESET> indicamos cómo se va a dividir la pantalla principal, donde podrán ir varias
directivas FRAMESET anidadas con el fin de subdividir cualquiera de las subdivisiones.
Sus atributos son:
 ROWS= "número o %" (Número de filas)
Se indica el número de filas en que subdividiremos la pantalla. El grupo de números que acompañan
se indican en puntos o en tanto por cierto de cada una de las subventanas; en este caso se entiende
que el primer valor que escribimos corresponde a la ventana superior, el segundo a la ventana
inmediatamente inferior y así sucesivamente.
Pongamos como ejemplo <FRAMESET ROWS= "25%, 50%, 25%" >, la pantalla quedaría así
 COLS= "número o %" (Número de columnas) Se indica el número de columnas en que

subdividiremos la pantalla. Los números también se indican en puntos o en tanto por cierto.
Aquí los valores se aplican de izquierda a derecha.
Con el siguiente ejemplo <FRAMESET COLS= "120, *, 80" >, la pantalla quedaría así:
Claro que también los podemos tener anidados, como por ejemplo:
<FRAMESET cols= "250%,*" rows= "15%, *" > la pantalla quedaría así:

Con la marca <FRAME> indicamos las propiedades de cada subventanas y necesitamos una
Marca <frame> para cada subventanas creada; los atributos son:
 name= "nombre" (Nombre) Indica el nombre por el que nosotros nos vamos a referir a esa
ventana.
 src= "URL" (Lugar de localización) Indica un fichero .html cuyo contenido se mostrará en esa
ventana.
 marginwidth= número (Ancho del margen) Indica el margen izquierdo y derecho de la
subventana, se da en puntos.
 marginheight= número (Alto del margen) Indica el margen superior e inferior de la
subventana, se da en puntos.
 scrolling= "yes/no/auto" (Desplazamiento) Indica si se aplica una barra de desplazamiento
(típica barra para moverse de arriba y abajo que aparece en Windows) a la subventana. en el
caso en que la página que se cargue en ella no quepa en los límites de la subventana. El valor
"yes" muestra siempre esta barra de desplazamiento, el valor "no" no la mostrará nunca (es
decir, la parte del frame que no quepa en la pantalla no la veremos) y, por último, "auto" la
mostrará sólo en caso de que sea necesario.
 Noresize Si se escribe este atributo, el usuario no podrá redimensionar las subventanas con
el visor; ya que un usuario podría cambiar el tamaño de las subventanas con solo situar el
cursor en un borde de la pantalla y desplazarlo.
2.2.4 FORMS (FORMULARIOS)

Los formularios o también llamados FORMS, se utilizan para la entrada y envío de datos (el
procesamiento de los mismos es otro asunto) desde una página HTML. Podremos utilizar
formularios para diseñar cuestionarios de todo tipo, por ejemplo, datos referentes al tipo de usuario
que visita nuestra página, para hacer pedidos de algún producto, encuestas, subscripción a algún
tipo de servicio, etc.
En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará
asociado a una variable. Una vez introducidos los valores en los campos, el contenido de éstos será
enviado a la dirección (URL) donde esté el programa que pueda procesar las variables, a este
programa externo se le suele denominar CGI (Common Gateway Interface, Interface de Compuerta
Común).
La marca es <FORM> ... </FORM> cuyos atributos son:
 action= "programa" (Acción), Se refiere a la acción a realizar cuando se pulsa el botón de
envío del formulario. Esta acción se puede enviar por correo el contenido del formulario
(action= mailto: <dirección e-mail> o activar algún otro URL, como por ejemplo un mensaje
que nos indique que el envío se ha realizado con éxito.
 method= POST / GET Que sirve para especificar el método según el cual se transferirán las
variables. GET lo utiliza por defecto y no produce cambios en el documento destino, por
ejemplo si consultásemos una base de datos. POST produce la modificación del documento
de destino, por ejemplo, cuando se envían por correo las variables.
Campos de entrada
Los elementos de entrada de datos se denotan con la etiqueta <INPUT> que tiene un atributo
type con varias especificaciones:
 type= text (Campos de texto para una única línea), Indica que el campo a introducir será un
texto; se utilizan generalmente para introducir cadenas de texto cortas como nombres,
direcciones, e-mail.
 name= campo, define cada campo de un formulario y es necesario para identificar los
valores asignados al mismo a la hora de procesar la información devuelta.
 maxlenght= número Número máximo de caracteres a introducir en el campo.
 size= número la anchura visible del campo en caracteres.
 value= "texto" valor inicial del campo, normalmente será vacío.
Ejemplo:
<INPUT type= "text" name="e-mail" maxlenght=300 size= 60>
 type= password (Campo password), Indica que el campo será una palabra de paso, por tanto
los caracteres tecleados por el usuario en pantalla se verán como asteriscos. Sus atributos
opcionales son los mismos que para type= text: name, maxlenght, size y value.
Ejemplo:
<INPUT type="password" name="clave" size=12 >
 type= checkbox (Campos de chequeo de opción), Indica que el campo se elegirá marcando
una casilla, o más de una. El campo aparece como una cajita que puede estar marcada o no,
según se active o desactive respectivamente. Sólo se devuelve el par nombre/valor
correspondiente a un "checkbox" cuando está activada.
• value= "valor"
• name= campo
• checked: Sirve para iniciar un botón en su estado activado
Ejemplo:
<INPUT type= "checkbox" name=activado >
 type= radio (Botones Circulares), Indica que el campo se elegirá marcando una casilla y sólo
una, siendo los botones circulares. Como sólo se Puede tomar un valor, todos los elementos
de este tipo que pertenezcan a un mismo grupo, deben tener el mismo valor para name.
Sólo el botón seleccionado será el que genere un par nombre/valor en los datos devueltos
del formulario.
• value="valor"
• name=campo
Ejemplo:
<INPUT type= "radio" name="edadf'" value= "menosl7" >
 type= range (Campo para Rangos), Permite elegir un valor determinado entre los posibles de
un rango delimitado por los tributos mín y máx. Se puede iniciar con un valor concreto
utilizando.
value= "valor"
Ejemplo:
<INPUT type= "range" name= nota min=1 max= 10 >
 type= image (Campo Imagen), Indica que el campo contendrá el valor de las coordenadas del
punto de la imagen pinchada, la imagen se indica con el atributo:
 src= "fichero de imagen"
Ejemplo:
<INTPUT type= "image" src= estadistica1.gif >
 type= submit (Botones de envío), aparece en forma de botón que es el que debe pulsarse,
una vez lo hemos completado, para enviar la información del formulario al programa
indicado en <form>.
value= "texto" que indica el texto que aparecerá en el botón, por ejemplo, Pulse
aquí.
src=imagen que sustituya al típico botón.
name= campo
Ejemplo:
<INPUT type= "submit" value= "Enviar" >
Campos de selección
Este tipo de campos despliegan una lista de opciones, entre las que deben escoger una o varias. Se
utiliza para ellos la marca <SELECT> ... </SELECT> y sus atributos son:
name= Nombre del campo.
• size= Número de opciones visibles. Si se indica uno se presenta como un menú desplegable, si se
indica más de uno se presenta como una lista con barra de desplazamiento.
• Múltiple Permite seleccionar más de un valor para el campo.
Las diferentes opciones de la lista se indican con la marca <OPTION> que puede incluir el atributo:
• selected Para indicar cuál es la opción por defecto, si no se especifica por defecto sale la primera
opción de la lista.
selected
Para indicar cuál es la opción por defecto, si no se especifica por defecto sale la primera opción de la
lista.
Ejemplo:
<SELECT name= Ciudades >
<OPTION= Jaen >
<OPTION= Palencia >
<OPTION= Soria >
<OPTION= Lugo >
</SELECT>
Áreas de texto
Representan un campo de texto de múltiples líneas y aparecen como una caja. Normalmente se
utiliza para que se incluyan en ellas comentarios. La marca es <TEXTAREA> .
</TEXTAREA> y sus atributos son:
• name= Nombre del campo
• cols= Número de columnas de texto visibles
• rows= Número de filas de texto visibles
• align= valor Puede ser top (arriba), middle (medio), bottom (abajo), left (izquierda) y right
(derecha)
2.2.5 HOJAS DE ESTILO
Este es un nuevo concepto que ha surgido gracias a la posibilidad que ofrecen algunos navegadores
más avanzados, por tanto recordemos que no siempre es posible su visualización.
Viene del término CSS (Cascading StyleSheet, Hojas de Estilo en Cascada).
Existen 4 posibles formas de combinar:
<HTML>
<HEAD>
<TITLE>menu</TITLE>
<LINK REL=STYLESHEET TYPE="text / css" HREF= "http://style.coni/cool"
TITLE="cool">
<STYLE TYPE= "text/css">
@import url (http://style.coni/basic);
H1 {color: blue}
</STYLE>
</HEAD>
<BODY>
<Hl> La cabecera es azul </HI>
<P STYLE= "color: green"> Mientras que el párrafo es verde
</BODY>
</HTML>
1 Usando un LINK que llama a una CSS externa.
2 Una marca <STYLE> dentro de la <HEAD>.
3 Una hoja de estilo importada del CSS denominada "@import".
4 Un atributo de style usado dentro del <BODY>.
Se puede agrupar un número de marcas comunes para reducir las órdenes:

• Hl, H2, H3 (font-family: helvetica)
• H1{ font-weight: bold;
Font-size: 12pt;
Line-height: 14pt.
Font-family: helvetica;
Font-variant: normal;
Font-style: normal; }
Y hay otras que se pueden agrupar así:
• H1 { font: bold 12pt/14pt helvetica } que es igual que el ejemplo anterior.

SEGUNDO PARCIAL
BLOQUE III: DISEÑAR UNA PÁGINA WEB CON UN SOFTWARE DE
APLICACIÓN.
3.1 Conceptos básicos de DreamWeaver
Qué es DreamWeaver
DreamWeaver es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de DreamWeaver permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript,
etc., de una forma muy sencilla y visual. Además 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.
Características de DreamWeaver
 Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta
versión de Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la
inclusión de elementos dinámicos en las páginas HTML. Por ejemplo se pueden incluir
acordeones, barras de menus, validación de formularios, acceso a datos XML, etc.
También se han incluido efectos spry que se aplican a elementos ya existentes en la página
HTML para hacer que se desvanezcan, reduzcan su tamaño, se resalten, etc.
 Mejoras en la comprobación de la compatibilidad con diferentes navegadores.
DreamWeaver puede generar informes con los problemas de visualización de elementos
CSS en los navegadores más utilizados.
 Mejoras en CSS. La administración de CSS es más fácil, ahora se pueden trasladar elementos
CSS entre diferentes hojas de estilo. También ha aumentado la cantidad de plantillas CSS
disponibles para aplicar a nuestras páginas web.
Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello
sólo es necesario crear los documentos con la
extensión HTML o HTM, e incluir como contenido del
documento el código HTML deseado. Puede utilizarse incluso
el Bloc de notas para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor
gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la
página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Adobe DreamWeaver.
Arrancar y cerrar DreamWeaver

Veamos las dos formas básicas de arrancar DreamWeaver
Desde el icono de DreamWeaver del escritorio
Desde el botón Inicio situado,
normalmente, en la esquina inferior izquierda .
de la pantalla. Colocar el cursor y hacer clic
sobre el botón 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 Adobe,
seguidamente DreamWeaver CS3, hacer clic
sobre él, y se arrancará el programa.
Para cerrar DreamWeaver
Hacer clic en el botón cerrar

Pulsar la combinación de teclas ALT+F4.
Hacer clic sobre el menú Archivo y elegir la opción Salir.
Si existe algún documento modificado que no ha sido guardado antes de cerrar DreamWeaver,
se te pedirá confirmación para guardar o no cada uno de ellos.
Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.
 Hacer clic en el botón abrir de la barra de herramientas estándar.

 Pulsar la combinación de teclas Ctrl+O.
 Hacer clic sobre el menú Archivo y elegir la opción 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 botón abrir de la barra de herramientas estándar.

 Pulsar la combinación de teclas Ctrl+N.
 Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
 Hacer doble clic sobre el archivo en la ventana del sitio.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en
blanco, HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
 Hacer clic en el botón guardar de la barra de herramientas estándar.

 Pulsar la combinación de teclas Ctrl+S.
 Hacer clic sobre el menú Archivo y elegir la opción Guardar.
DreamWeaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios
documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes operaciones.
 Hacer clic en el botón guardar todo de la barra de herramientas estándar.

 Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada
uno de ellos. Debes tener mucho cuidado al utilizar la opción 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 opción, al menos hasta que te hayas habituado a
manejar el programa.
Mi primera página
Lo primero que tienes que hacer es abrir DreamWeaver. Ya has visto en la página anterior como
puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica, 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 título y el color de fondo del documento.
Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Entonces se abrirá una ventana como la que aparece más abajo.
Cambia el Título por Mi primera página.

En Color de Fondo escribe #CCCCFF, de este modo el
fondo del documento pasará a ser de color azul.
Seguidamente pulsa sobre el botón 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 imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el
botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con
una opción similar a Guardar imagen como... (Dependiendo del navegador que utilices) que
permite grabar dicha imagen en un fichero de nuestro disco duro.
Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes
situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea.
Después debes dirigirte al menú Insertar, a la opción Imagen.
En la nueva ventana que aparece, deberás buscar la
imagen en la carpeta en la que la habías guardado,
y después seleccionarla.
Ahora vas a pasar a cambiar el formato del texto.

Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la
parte inferior de la ventana, y que tiene el siguiente aspecto:
Si no aparece, puedes mostrarlo a través del

menú Ventana, con la opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para
que te aparezca desplegado debes pulsar sobre el botón , que aparece junto al nombre
Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066,
tal y como se muestra en la siguiente imagen.
Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos
últimas líneas de texto. Pulsa sobre el botón para centrarlos. Una vez hayas centrado la imagen
y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido
modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botón y pulsa tres
veces sobre el botón .
Selecciona de nuevo la última línea, y en Vínculo introduce http://www.elpais.es, para crear un

enlace a esa otra página:
Después de todos estos pasos, puedes ver cómo ha quedado el

documento pulsando la tecla F12.
Por último guarda el documento. Ya sabes que puedes hacerlo a través
del menú Archivo, desde la opción Guardar.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha
de ser htm o html.

3.2 EL ENTORNO DE TRABAJO
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á más fácil entender el resto
del curso. La pantalla que se muestra a
continuación (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 más adelante.
Las barras
La barra de título
La barra de título contiene el nombre del programa (Macromedia DreamWeaver) y seguidamente

el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el
nombre del archivo en formato HTML. En el extremo de la derecha están los botones para
minimizar, maximizar/restaurar y cerrar.
La barra de menús
La barra de menús contiene las operaciones de DreamWeaver, agrupadas en menús 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 menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estándar
La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de
las operaciones más 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 estándar. 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 la
imagen al encontrarnos en un documento en blanco estamos directamente sobre la
etiqueta <body>).
También es posible alternar entre los modos de selección, mano (para arrastrar la página), 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%).
Los paneles e inspectores
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 través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los más importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las

propiedades del elemento seleccionado que son usadas de
forma más frecuente. Por ejemplo, cuando el elemento
seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o
cursiva, etc.
Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se
encuentra en la esquina inferior-derecha.
Seguramente será la herramienta de DreamWeaver que más 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 están clasificados según su categoría:
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.
Vistas de un documento
Puedes cambiar la vista del documento a través de la barra de herramientas de documento.
La vista Diseño
La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y
la que se suele utilizar habitualmente.
La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de
código fuente. No permite tener directamente una referencia visual de cómo va quedando el
documento según se va modificando el código.
La vista Código y Diseño

La vista Código y Diseño permite dividir la ventana
en dos zonas. La zona superior muestra el código
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.

La ayuda
A través del menú Ayuda puedes ir a varias
opciones, veamos algunas de ellas:
 Acceder al cuadro de diálogo de ayuda muy
similar al de Windows donde puedes buscar
por temas, por índice o por contenido, si
seleccionas la opción Ayuda de DreamWeaver o simplemente pulsando F1.
 Acceder a tutoriales en internet (en la opción Recursos de ayuda en línea).
 Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas
HTML.
 Acceder al Centro de servicio técnico de DreamWeaver en la web.
 Acceder al Foros en línea de Adobe.
3.3 TEXTO
Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través
del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través
del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del
menú Texto.
Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado,
párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un
documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito,
por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al
establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo
uno.

Fuente: Permite seleccionar un conjunto de
fuentes. Aparecen conjuntos de fuentes en lugar
de una sola, ya que es posible que al establecer
una única fuente el usuario no la tenga en su
ordenador. El seleccionar un conjunto de fuentes
posibilita que en el caso de que el usuario no
tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica,
Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.
 Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en
píxeles, centímetros, etc...
 Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni
aquí, el color del texto por defecto será el negro.
 Estilo:
Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del
menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el
panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen
subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un
vínculo.
 Alinear:
A través de estos botones es posible establecer la alineación del texto de una de estas cuatro
formas distintas: izquierda, centrada, derecha y justificada.
 Lista:
Estos botones permiten crear listas con viñetas o listas numeradas.
 Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de
margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a
la izquierda del texto.

3.4 HIPERENLACES
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un
elemento esencial para cualquier página web.
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de
una página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer
el Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso
contiene HTTP://
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que
explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrará el enlace
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás
escribirla empezando siempre por HTTP://.
Destino: la página donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las
imágenes.
Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace
mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces
pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad
del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos.
Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede
variar dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que
aparece a través del menú Insertar, opción Hipervínculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto
de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que
el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de
destino, ya que se volverán a ver en el tema de Marcos.

3.6 TABLAS
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá que
especificar el número
de Filas y Columnas que tendrá la
tabla, así como el Ancho de la tabla.
El Ancho puede ser definido
como Píxeles o como Porcentaje. La
diferencia de uno y otro es que el
ancho en Píxeles es siempre el mismo,
independientemente del tamaño de la
ventana del navegador en la que se
visualice la página, en cambio, el ancho
en Porcentaje indica el porcentaje que
va a ocupar la tabla dentro de la página
y se ajustará al tamaño de la ventana
del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el
ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1).
Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas indica la distancia entre las celdas de la tabla.
También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar
encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla
leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento
de la información de la tabla.
Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.
En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla.
En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del
resumen pero dicho texto no aparece en el navegador del usuario.
3.7 MARCO
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten
mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras
que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la
apariencia.
Cada uno de los marcos de una página, contiene
un documento HTML individual. Por ejemplo, en
la imagen de la izquierda puedes ver una página
con dos marcos. El marco izquierdo contiene el
documentomenu.htm y el derecho el
documento quienes.htm. Para poder visualizar la
página de este modo, hemos tenido que abrir en
el navegador el documento marcos.htm, que es
la página que contiene los marcos agrupados.
Crear marcos
Existen varias formas de crear un marco.
Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir
algún documento. Puede ser uno nuevo o uno
ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta
opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del
documento actual.
Como puedes ver en la imagen, aparece una línea que

divide el documento en dos. El documento de partida era
uno nuevo.
En este caso tendremos tres documentos: el de la
izquierda, el de la derecha, y el que contiene el grupo de
marcos. El de la derecha es el documento que teníamos

inicialmente, que está en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea
que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.
Seleccionar marcos
Para seleccionar los marcos del documento es
necesario dirigirse al panel Marcos, que puede abrirse a
través del menú Ventana. Si la opción Marcos no te
aparece directamente en este menú, posiblemente esté
dentro de la opción Otros. También puedes abrir el
panel Marcos pulsando la combinación de
teclas Mayús+F2.
En el panel Marcos aparecen los marcos que contiene
el documento de marcos, y se puede pasar de uno a otro
pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando
sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).
No es necesario seleccionar los marcos para editar los documentos que éstos contengan.
Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno
de ellos.
3.8 FORMS (FORMULARIOS)

Los formularios se utilizan para recoger
datos de los usuarios, nos pueden servir para
realizar un pedido en una tienda virtual, crear
una encuesta, conocer las opiniones de los
usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa
el botón para enviar el formulario se

arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y
validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones
de programación, ya sea en VBScript, en JavaScript o en otro lenguaje de programación.
A la derecha tienes un ejemplo de formulario.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús
desplegables, y botones.
Los elementos de formulario pueden insertarse en una página a través del menú Insertar,
opción Formulario.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario que
pueden ser insertados en la página.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un
formulario, así como algunas de sus propiedades.
Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea,
mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades,
marcando la opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las letras que
va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para
ver su funcionamiento.
Botón

Es el botón tradicional de Windows. El botón puede tener asignadas Enviar
tres
opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del
formulario), o Ninguna (para poder asignarle un comportamiento diferente
de los dos anteriores).
También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del inspector
de propiedades.
Casilla de verificación
Es un cuadrito que se puede activar o desactivar.
Deseo recibir información
Puede asignársele el Estado inicial como Activado o como Desactivado.
Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo
formulario, sólo puede haber uno activado. Cuando se activa uno, automáticamente se
desactivan los demás.
Superman
Spiderman
Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.
Los elementos se añaden a través del botón Valores de lista... del inspector de propiedades.
Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una
lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen
varios simultáneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda
saber qué datos ha de introducir en cada uno de ellos.

Crear formularios
Puedes crear formularios a través del menú Insertar,
opción Formulario.
Una vez creado un formulario, este aparecerá en la ventana de
DreamWeaver como un recuadro formado por líneas rojas
discontinuas, similar al de la imagen de la derecha.
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes
puedes insertar a través del menú Insertar, opción Formulario.
Validar formularios
La validación de formularios sirve para hacer que
Javascript valide el formulario antes de que se envíe el
formulario, para que en el caso de que haya campos del
formulario que sean obligatorios, tengan que rellenarse
antes de poder enviarse.
Para validar un formulario hay que abrir el panel
de Comportamientos. Este panel se puede abrir a través
del menú Ventana, opción Comportamientos, o
pulsando Mayús+F3.
En este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás
haber seleccionado el formulario previamente.
Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del
formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos
que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido
ha de ser numérico (Número), una Dirección de correo electrónico, etc.
3.9 MULTIMEDIA
Películas Flash
Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la
extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de
presentación hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de
animación Las películas Flash pueden insertarse en una página a través del
menú Insertar, Media, opción Flash, o pulsando Ctrl+Alt+F.
También pueden insertarse pulsando sobre la opción Flash que aparece en la

pestaña Común del panel Insertar, botón Media.
El inspector de
propiedades de las películas
Flash es prácticamente igual
que el de los botones y el
texto Flash, pero existen dos
opciones nuevas que hacen
referencia a la visualización
de la película.
La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.
La otra es la opción Rep. autom. (Reproducción automática), que al estar marcada indica que
nada más cargarse la página comenzará a reproducirse la película Flash.
Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película.
Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún
comportamiento.
Sonido

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en
algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden
utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello
sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía,
opción Plug-in.
Videos
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía,
opción Plug-in.
A la derecha tienes un ejemplo de un archivo de vídeo, para el que se muestran los controles de
vídeo. Puedes reproducirlo pulsando sobre los controles.
El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el
de los archivos de audio, ya que ambos se insertan como Plug-in.
Los vídeos también se reproducen automáticamente al cargarse la página, y se reproducen

solamente una vez. Estos valores pueden cambiarse a través del código, del mismo modo que en el
caso de los archivos de audio, añadiendo autostart="false" y loop="true".
Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado
un reproductor o un plug-in apropiado para reproducirlos. En el campoOrigen del inspector de
propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de
reproducirse.
En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el
campo URL plg una página en la que pueda encontrarlo.
3.10 PLANTILLAS
Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de
páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas
editables y otras zonas que serán fijas, que no podrán ser modificadas.

No es posible modificar las propiedades de una página que está basada en una plantilla, a
excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de
fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una
u otra plantilla, según el color de fondo que se desee para cada una.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas
en ella.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una
carpeta llamada Templates.
Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.
La pestaña Activos se puede abrir a través del menú Ventana, opción Activos. También
pulsando F11.
Una vez abierto el panel hay que seleccionar el
botón , para poder trabajar con las plantillas.

Los botones inferiores del panel Activos
son similares a los del panel Estilos

CSS.
El único botón diferente es el primero, que en
este caso sirve para actualizar la lista, el resto
permiten crear una nueva plantilla, editar una
plantilla seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar
sobre el botón (Si este botón no está activado, pulsa con el botón derecho del ratón y
elige Nueva Plantilla).
Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible
cambiarle el Nombre pulsando previamente sobre él.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .
Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea
automáticamente.
Para crear una plantilla a partir de un archivo
existente es necesario abrir dicho archivo, y

después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.
Cuando se pulsa dicha opción, aparece una ventana como la de la derecha.
En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del
campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.
BLOQUE IV: PUBLICAR PAGINAS WEB.

4.1 PROVEEDORES DE SERVICIO DE INTERNET
INFINITUM
Infinitum es un servicio de Internet ADSL proporcionado por Telmex, incluyendo además telefonía y
conexión Dial-Up. Hasta el primer trimestre de 2012 contaba con aproximadamente 8 079 000
clientes con conexión a Internet y aproximadamente 60 000 clientes que usan conexión Dial-Up.
Telmex comenzó a ser proveedor de servicios de Internet (ISP) a través de la marca Uninet. Un año
después, cambió el nombre a “Internet Directo Personal de Telmex”. En 1996 Telmex compró
de IBM y Sears, el proveedor de internet Prodigy Communications con lo que trajo la marca a
México, Prodigy Internet de Telmex.
Infinitum provee mediante la línea telefónica (par de cobre) un acceso a Internet con
tecnología ADSL2+. Debido a esta tecnología puede sufrir fluctuaciones debido a interferencias
magnéticas del ambiente, estado físico del cableado o distancia con la central.
Es el servicio de Internet de banda ancha de Telmex cuenta con diferentes velocidades, desde
3 Mbit/s hasta 10 Mbit/s, siendo el principal proveedor de Internet de banda ancha en México. Cabe
notar que la calidad de la señal puede variar dependiendo de la distancia con la central y factores
externos, de modo que las velocidades no están garantizadas.
Para corregir el problema de cableado ADSL, Infinitum ha estado manejando desde 2011 un cambio
a fibra óptica. Según su propia página, no hay costo adicional por el cambio para aquellos que

manejan los paquetes de Paquete acerques y Todo México y U.S.A. sin límites. Aunque
anteriormente las velocidades se manejaban de de 10 Mbit/s y 20 Mbit/s respectivamente,
posteriormente volvió a implementar las velocidades estándares: de 5 Mbit/s para Paquete
acerques y 10 Mbit/s para Todo México y U.S.A. sin límites.
MEGACABLE
Megacable Holdings S. A. B. de C.V., o Megacable Comunicaciones, es una
empresa mexicana dedicada a la comercialización de televisión por cable, servicio
de internet y telefonía. Es una de las principales empresas de servicio de televisión por cable en
México y de servicio de internet por cable en Latinoamérica.
A partir de junio de 2006, Megacable se convierte en competencia directa de Telmex, al comenzar a

ofrecer en la ciudad de Guadalajara su servicio de telefonía local Megafón. El servicio se ofrece en
sociedad con la empresa Bestel.
La razón social e imagen corporativa cambia en el año de 1995 para llamarse Megacable. Como un
servicio adicional para los suscriptores, se crean canales de televisión con producción local en el año
de 1997 en Guadalajara, Los Mochis y Culiacán, exclusivos para usuarios del servicio de televisión
por cable, bajo el nombre Megacanal. Asimismo, inicia Megared en Guadalajara como servicio
pionero en América Latina, que ofrece Internet por cable.
En el año 2000 se hacen las primeras pruebas para otorgar servicios de redes privadas virtuales, con
lo cual se pretende darles servicio a clientes corporativos a quienes se ofrece darles soluciones de
conectividad y comunicación en red, con la empresa Metrocarrier. Se pone en línea el Portal
Megared, el primer portal multimedia de banda ancha en México, con noticias, servicios y
entretenimiento, exclusivo para los suscriptores de Megared. Este portal está disponible en diez
ciudades de la red Megacable.
En 2005 se lanzaron los servicios de DVR, VOD y HDTV, tecnologías que operan bajo el servicio
Megacable Digital y que permiten al suscriptor contar con más opciones de entretenimiento
personalizables. En 2006 la compañía lanza el servicio Megafón, siendo uno de los primeros
competidores de Telmex en el ramo de telefonía local.
En 2009, en alianza con las tres empresas proveedoras de televisión por cable más importantes de
México, (Cablevisión y Cablemás lanzó el paquete triple play, Yoo, con el fin de ofrecer un producto
con precio unificado y captar a los clientes de Telmex). En 2011 MegaCable se inicia como
proveedor de servicios de telefonía móvil, con este nuevo servicio la empresa para entrar en el
mercado de Cuádruple Play.
AXTEL
AXTEL S.A.B de C.V. es una empresa México de telecomunicaciones que atiende todos los
segmentos de mercado (empresarial, financiero, gubernamental, wholesale y residencial) con una
oferta de servicios integrales de comunicación.
Su red está constituida por distintas tecnologías de acceso como fibra óptica, acceso inalámbrico
fijo, enlaces punto a punto y punto a multipunto.
El Servicio de AXTEL incluye el servicio de banda ancha a través de fibra óptica directo al hogar o
negocio de sus clientes, las soluciones para la transmisión de datos e implementación de redes
privadas virtuales, web hosting, data centers, seguridad administrada, servicios para otros
operadores de telecomunicaciones y servicios de voz, entre otros.
AXTEL ha recibido el reconocimiento por parte del CEMEFI como Empresa Socialmente
Responsable por cinco años consecutivos desde 2008.
CABLEVISIÓN
Empresas Cablevisión, S.A.B. de C.V., es un operador de servicios de telecomunicaciones digitales
propiedad de Grupo Televisa y Grupo Financiero Inbursa con sede en la Ciudad de México,
ofreciendo servicios de telefonía, internet y televisión por cable tanto a personas como a empresas,
con cobertura únicamente en la Ciudad de México y su área metropolitana.
El 3 de Octubre de 1966 se funda la empresa e inicia operaciones con un grupo de 10 personas

lideradas por el Arquitecto Benjamín Burillo Pérez.
En 1969, la Secretaría de Comunicaciones y Transportes le otorga a la empresa un permiso
provisional para la operación de una red de 124 Km de cable coaxial en la Colonia Roma, contando a
esa fecha 300 suscriptores. Para ese mismo año la empresa ya es parte de Grupo Televisa del
empresario Emilio Azcárraga Milmo.
En 1978, la empresa construye el primer sistema de cableado subterráneo, e incorpora otros dos
canales propios: Canal 16 y Canal 23. Para este mismo año, las operaciones de Cablevisión están a
cargo de Alejandro Burillo Azcarraga.

En 2002, comienza la oferta del servicio de Internet bajo la marca NetRunner, y en noviembre del
mismo año inicia la publicación de la revisa Contacto Digital. En 2004, inicia oficialmente el proceso
de digitalización y NetRunnet cambia de nombre a Cableaccess. En 2007, se completa la
digitalización y el servicio se vuelve 100% digital, inicia la oferta del servicio de telefonía fija.
En 2009, Grupo Televisa a través de las empresas Cablevision México, Cablevisión

Monterrey, Cablemas y Megacable presentan el paquete YOO de 40 canales, telefonía ilimitada e
Internet. En 2012, se sustituyen los nombres de los paquetes por los de la marca Yoo. Se oferta el
servicio de internet por fibra óptica.
SKY MÉXICO
SKY México es un operador de televisión por satélite que opera en México, Centroamérica y
el Caribe. Y ofrece también el servicio de internet por fibra óptica bajo marca Blue To Go a sus
suscriptores de la Ciudad de México.
En 2009, comienza la oferta del servicio de prepago a bajo costo bajo la marca VeTV por Sky. Y
comienza a utilizar la marca MiSKY, para ofrecer paquetes modulares de canales.
En 2010, obtiene los derechos para la transmisión del Mundial FIFA Sudafrica 2010. Y da inicio a su
oferta de Canales en Alta Definición.
En abril de 2012, comienza la oferta del servicio de internet por medio de la red de fibra
óptica de Cablevisión. Bajo la marca Blue To Go.
En 2013, comienza la oferta del servicio de TV Everywhere, bajo la marca Blue To Go Video
EveryWhere.
INTRODUCCION A SITIO REMOTO
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o
un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a
contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos
HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes,
las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el
objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se
conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
La organización de los archivos en un sitio permite administrar y compartir archivos, mantener
los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los
navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador,
éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un
error en el caso de que no existiera ninguna página con el nombre index.htm.
Una vez creadas las carpetas que formarán un sitio

local, ya es posible definir el sitio en DreamWeaver.
Para ello hay que dirigirse al menú Sitio, a la
opción Administrar sitios....
Recuerda que a través del panel Archivos,
pestaña Archivos, se puede acceder a cada uno de
los sitios creados y a la opción Administrar sitio.
En el caso de haber seleccionado la

opción Administrar sitios, aparece una
ventana que contiene la lista de sitios locales
definidos con anterioridad.
Por supuesto, pueden existir varios sitios
locales en un mismo ordenador.
Tanto si se elige la opción Nuevo..., como si
se elige la opción Editar..., se mostrará la
misma ventana en la que definir las
características del sitio.

Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic
en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio
dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página
principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta
raíz del sitio existe una página con el nombre index.htm, DreamWeaver la cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y
no es necesario establecer los datos del servidor en el que estará el sitio remoto.
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la
pestaña Básicas, en vez de la pestaña Avanzadas.
4.2 CONFIGURAR UN SITIO REMOTO

Es posible visualizar un sitio en el panel Archivos o en una ventana.
El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8.
Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece en la parte
superior del panel y de la ventana.

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o
el mapa del sitio.
En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya
que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros dos.
En cambio, si estas modificaciones se hacen desde dentro de DreamWeaver, a través del sitio, es
posible actualizar automáticamente
las páginas para que si hacen
referencia a un objeto que ha
cambiado, después no se produzcan
problemas al visualizarlas.
Al modificar algún objeto que es
referenciado por algún otro
documento, se muestra una ventana
similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser
actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botón Actualizar.

4.3 SUBIR ARCHIVOS AL SERVIDOR
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás
subir los archivos al sitio que hayas contratado o conseguido gratuitamente.
Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir
subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse
muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu
carpeta del disco duro. Sino los enlaces no funcionarán correctamente y es posible que algunas
imágenes no se muestren.
Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos.
Esta forma es, de lejos, mucho mejor que la anterior.
Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de
Windows) y, obviamente, nos es mucho más útil para subir los archivos.
Uno de los programas gratuitos (si no es con fines comerciales) más utilizados es FileZilla, desde su
página web podrás descargarte el programa. Una vez instalado, abre el programa veraz una
interfaz sencilla de utilizar.
Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus
páginas: Host, Usuario y Contraseña.
Rellena los campos y haz clic en OK. Se conectará
automáticamente y podrás ver una carpeta
donde podrás copiar los archivos que hayas
creado.
Para ello, haz clic en Archivo y en Nuevo
Navegador Local para abrir un navegador de los
archivos de tu disco duro. Busca la carpeta que
definiste como Sitio local y copia todos los
archivos que quieras subir seleccionándolos a la
vez y arrastrándolos a la carpeta (remota) del servidor.

MANUAL DE PAGINA WeB HTML PDF

Uploaded by

Document Information

Original Title

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

MANUAL DE PAGINA WeB HTML PDF

Uploaded by

Copyright:

Available Formats

ACADEMIAS 2019-A

COLEGIO DE BACHILLERES DEL

ELABORACIÓN DE PÁGINAS WEB

BLOQUE I: UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO.

BLOQUE II: MANEJAR LOS ELEMENTOS BÁSICOS DE UN

BLOQUE III: DISEÑAR UNA PÁGINA WEB CON UN SOFTWARE DE APLICACIÓN.

BLOQUE IV: PUBLICAR PÁGINAS WEB.

1.1 TERMINOLOGÍA BÁSICA:

¿Qué es un sitio web?

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 2

Protocolo de Transferencia de Hipertexto, su

Tipo de dominio, educativo, comercial

La World Wide Web, mejor conocido

1.2 TIPOS DE SITIOS WEB:

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 4

1.3 ELEMENTOS BÁSICOS DE DISEÑO WEB:

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 5

<font face="Arial, Helvetica, sans-serif" size="+1">Mi Primera página</font>

TEORÍA DEL COLOR

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 6

Algunas formas comunes de publicar contenido con multimedia en web son:

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 7

Otro uso común de los botones gráficos es el de representación de opciones en un menú de

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 8

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 9

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 10

JavaScript (abreviado comunmente "JS") es un lenguaje de programación interpretado, dialecto del

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 13

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 14

2.1.2 MI PRIMER DOCUMENTO:

3. Grabe este archivo con el nombre: Index.html

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 16

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 17

2.1.4 NORMAS FUNDAMENTALES DE HTML

 Igualdad de mayúsculas y minúsculas.

 No importan los tabuladores, ni los saltos de línea

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 18

2.2 COMANDOS BÁSICOS DE HTML

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 19

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 20

Listas desordenadas: UL.

Listas de definición: DL.

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 22

Comentarios no visibles en la pantalla

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 23

color especial y subrayado.

Enlaces a otras zonas de la misma página

 El nombre enlazado o referenciado

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 25

Espacio entre las celdas

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 26

Celdas de diferentes tamaños.

2.2.3 FRAMES (MARCOS)

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 27

 COLS= "número o %" (Número de columnas) Se indica el número de columnas en que

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 28

2.2.4 FORMS (FORMULARIOS)

Se puede agrupar un número de marcas comunes para reducir las órdenes:

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 34

Arrancar y cerrar DreamWeaver

Hacer clic en el botón cerrar

 Hacer clic en el botón abrir de la barra de herramientas estándar.

COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 36