Usar un editor visual de HTML (WYSIWYG)

Algunos editores muy conocidos son Dreamweaver, Go Live o NVU. Son software especializado
en la creación de sitios web, construidos para crear y modificar el código HTML, CSS, PHP, etc. de
tus páginas web. Tienen funciones muy útiles para un diseñador web, como el editor gráfico, que te
permite crear webs con pocos conocimientos de HTML ya que se asemeja a un procesador de
textos. Otras funciones muy interesantes de estos programas son el permitir remplazar código de
múltiples páginas a la vez, la comprobación de errores de programación en el código, previsualizar
las páginas en diferentes navegadores, etc. En esta misma web hay un manual de Dreamweaver para
que aprendas a manejarlo.
Lo más interesante sin duda para una persona que está aprendiendo a hacer webs es el editor
gráfico. Tú creas la página como si del Word se tratara; escribes el texto, los títulos, pones las
imágenes, eliges los colores, etc. y el programa te guarda la página con el código HTML listo. Es lo
que se llama What You See Is What You Get (WYSIWYG), lo que ves es lo que obtienes. Se les
llama así con razón, puesto que utilizandolos no es necesario escribir nada de código HTML para
crear una página web.

La desventaja que tienen estos programas es que si no sabes nada de HTML el diseño de tu página
va a estar algo limitado, porque con el editor gráfico se pueden hacer cosas básicas o intermedias,
pero para funciones más complicadas es muy recomendable saber un poco de HTML.

Usar un editor de textos o de HTML

Si sabes HTML una buena opción es programar tú mismo todo el código de tu web mediante
editores de código fuente como el Block de notas de Windows (no está diseñado para eso pero
puede usarse), o algunos un poco más especializados como Notepad. Éste último te colorea el
código de diferentes tonos según el tipo de código que tenga la página, lo cual resulta muy útil para
buscar fragmentos de un vistazo.
 Los editores de texto son programas simples pero muy eficaces que permiten guardar
documentos de texto sin formato. Al no ofrecer ningún tipo de guía visual, al contrario que
los editores HTML o WYSIWYG, son los más complicados de utilizar para los que
empiezar a hacer páginas web.
 Los editores de HTML son básicamente editores de texto diseñados específicamente para
hacer páginas web, por tanto traen incorporadas funcionalidades que no tienen los editores
de texto genéricos, y que facilitan mucho las cosas.

Otros recursos para hacer tus webs

Usar plantillas prefabricadas (templates)
Una plantilla prefabricada (o template) es un diseño ya hecho listo para que lo personalices y
adaptes a tu web. En realidad el diseño ya está hecho, osea que no tendrás que “hacer la web”
literalmente, pero en tus manos está adaptarlo exáctamente a lo que quieras. Obviamente para
adaptarlo a tus necesidades tendrás que utilizar un editor WYSIWYG o HTML, según tus gustos.
Algunos ejemplos de plantillas web (templates) disponibles en Internet:

Las plantillas web se pueden encontrar en varios formatos, como Photoshop o HTML. En la
mayoría de los casos, estos templates son compatibles con los editores web más conocidos, como
Dreamweaver o FrontPage, por lo que pueden modificarse tranquilamente.
Las plantillas web son una forma de conseguir un diseño atractivo sin necesidad de tener muchos
conocimientos de desarrollo de páginas web, o también una forma de inspirarte para crear tu propio
diseño (mirando lo que han hecho otros pueden surgirte ideas).
Algunos sitios de templates bastante populares son: Template Monster, Open Source Web Design o
Template World.

Primeros pasos para aprender a hacer una página web

AVISO: este artículo es un capítulo introductorio al resto del manual. En él no se dan explicaciones
específicas sobre la creación de páginas web, simplemente se introduce al lector en materia para que
según sus necesidades e inquietudes profundice en los temas que le interesen mediante los enlaces
que se van sugiriendo durante la lectura. Para una explicación más concreta sobre los pasos a seguir
para hacer una web, hay que leer el manual completo, no sólo este artículo.
Ahora podemos empezar. Antes de nada, decir que el desarrollo web es un proceso creativo y
personal en el que cada uno decide cómo hacer las cosas, por lo que estos pasos que te propongo
aquí son sólo eso, propuestas, ideas, sugerencias o como quieras llamarlo. Cada uno después puede
optar por hacer las cosas como prefiera.
No obstante, puede ser interesante que visites las secciones accesibilidad, usabilidad y
posicionamiento en buscadores antes de comenzar a elaborar tu trabajo, ya que cuando las leas
comprenderás que hay que tener muchas cosas en cuenta a la hora de elaborar una web y sus
contenidos si queremos tener cierto éxito.
Una vez aclarado esto, hay que decir que para el diseño de páginas web debemos tener en cuenta
varias etapas:

1. Planteamiento de objetivos para tu página web

Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para
plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu
web debe incluir:
 Breve descripción de los contenidos de la página, su título principal, etc.
 Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
 Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público
objetivo, etc.
 Hardware, software, documentación que necesito para realizarla y de qué dispongo
realmente.
 Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas
físicos, etc. para adaptar la página a sus características.
 Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos,
etc.

2. Estructurar el contenido de la página

Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el
texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren
pertinentes, mediante el cual ir creando la estructura de la página web. Antes de empezar a
desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su
estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar
rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar
el contenido de una web:
En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las
cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas
web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los
intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque
para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la
navegación muy pesada.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas
están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una
estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba
recorrer forzosamente una serie de páginas web para conseguir su objetivo.

Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en
niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más
navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de
volver a la página principal para hacerlo.

En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que
es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir
a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante
un caos de enlaces innecesarios.

Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar
información para confeccionar cada sección de tu página web. Conforme vayas investigando sobre
el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en
sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes
sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes
haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la
izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una
última columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente que
al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión
de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección
en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez. Por
lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para
adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.

3. Diseñar la página web

Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de
varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo
que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los
elementos interactivos y gráficos que van a intervenir en cada una. Para esto, y fundamentalmente
para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje
de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el
formato estándar de las páginas web. A la hora de empezar con el diseño, ten en cuenta que:
 La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus
 visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar
huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es
probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil
navegar por los contenidos.
 Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que
así podrás hacer todo lo que quieras sin depender de editores gráficos como Dreamweaver
(ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus
diseños, podrás corregir tu código y saber qué es lo que falla cuando te de errores,
entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página, hay
un manual HTML muy completo que puedes mirar.
 Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una
página atractiva y bien diseñada. Con las hojas de estilo puedes crear un archivo que te sirva
para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el
aspecto de tu web, sólo tendrás que modificar ese archivo en lugar de ir una por una
revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta misma
web hay un manual completo de hojas de estilo o CSS.

Accesibilidad web. Pautas esenciales de

accesibilidad
Existen millones de personas con discapacidad que no pueden utilizar la web. Actualmente, la
mayoría de los sitios y los software web presentan barreras de accesibilidad, lo que está dando
lugar a situaciones de imposibilidad de acceso a la información por parte de aquellos usuarios con
discapacidades. Cuanto más software y sitios web accesibles estén disponibles, más personas con
discapacidad podrán utilizar la web y contribuir de forma más eficiente.
La accesibilidad web hace referencia a la capacidad de acceso a la web y a sus contenidos por todas
las personas, independientemente de las limitaciones propias del individuo (discapacidades, idioma,
conocimientos, experiencia, etc.) o de características de su equipo de navegación o el entorno
ambiental desde donde accede a la web. La idea más importante en la accesibilidad web consiste en
mostrar a los creadores de páginas web todas las alternativas y herramientas web disponibles para
hacer que sus páginas sean legibles y comprensibles para el mayor número de usuarios, de forma
que todas las personas puedan navegar por la web en cualquier condición.

Es muy importante que la web sea accesible para así proporcionar un acceso equitativo e igualdad
de oportunidades a las personas con discapacidad. Una página web accesible puede ayudar a
personas con discapacidad a que participen más activamente en la sociedad. Piensa que el esfuerzo
que hagas en hacer tu web más accesible también te beneficiará a ti, puesto que es más probable que
los visitantes vuelvan a una página de fácil acceso que a otra que no lo es, por lo que estarás
fidelizando visitas. Por otro lado, la accesibilidad está muy relacionada con la usabilidad web, que
consiste en facilitar la navegación a tus visitantes para que les sea más sencillo acceder a los
contenidos que les ofreces.

Pautas de accesibilidad web

Para hacer el contenido web accesible, se han desarrollado las denominadas Pautas de
Accesibilidad al Contenido en la Web (WCAG), cuya función principal es guiar el diseño de
páginas web hacia un diseño accesible, reduciendo de esta forma barreras a la información. WCAG
consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo
situaciones comunes en las que el diseño de una página puede producir problemas de acceso a la
información. Las Pautas contienen además una serie de puntos de verificación que ayudan a
detectar posibles errores, describen cómo hacer páginas accesibles sin sacrificar el diseño,
ofreciendo esa flexibilidad que es necesaria para que la información sea accesible bajo diferentes
situaciones y proporcionando métodos que permiten su transformación en páginas útiles e
inteligibles.
Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las
pautas:
 Prioridad 1: son aquellos puntos que un desarrollador web tiene que cumplir ya que, de otra
manera, ciertos grupos de usuarios no podrían acceder a la información del sitio web.
 Prioridad 2: son aquellos puntos que un desarrollador web debería cumplir ya que, si no
fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.
 Prioridad 3: son aquellos puntos que un desarrollador web debería cumplir ya que, de otra
forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información.
En función a estos puntos de verificación se establecen los niveles de conformidad de
accesibilidad :
 Nivel de Conformidad “A”: todos los puntos de verificación de prioridad 1 se satisfacen.
 Nivel de Conformidad Doble “AA”: todos los puntos de verificación de prioridad 1 y 2 se
satisfacen.
 Nivel de Conformidad Triple “AAA”: todos los puntos de verificación de prioridad 1,2 y 3
se satisfacen.

Componentes esenciales de accesibilidad web

 Contenido: información presente en una página o aplicación web. Esto incluye texto,
imágenes y sonidos, código que define la estructura, etc.
 Navegadores web, reproductores multimedia y otros “agentes de usuario”.
 Lectores de pantalla, teclados alternativos, software de escaneo, etc.
 Conocimiento de los usuarios y experiencia en la utilización Web.
 Desarrolladores – diseñadores, codificadores, autores, etc.
 Software para crea páginas web, para evaluar la accesibilidad web, validadores de HTML,
validadores de CSS, etc.

Beneficios de la usabilidad web

Son diversos son beneficios que aporta la usabilidad a la web, por eso hay que tenerla en cuenta
desde los primeros momentos del diseño y desarrollo web de un sitio. En el momento de organizar
los cotenidos de la web es importante pensar en la usabilidad, te aportará beneficios como:
 La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas de
tiempo.
 El aprendizaje del manejo de la web es mucho más rápido e intuituvo, y el usuario enseguida
se familiariza con la página, haciendo nuestros productos o servicios más visibles.
 Los visitantes se sienten más seguros y necesitan menos ayuda por parte del soporte técnico
 de la web, con la consiguiente reducción de costes y esfuerzos y una percepción más
positiva de la visitas.

2. Consejos prácticos
Una web útil debe anticiparse a las necesidades del usuario, el cual debe tener el control sobre el
sitio web en el sentido de poder navegar con soltura y realizar las acciones que desee sin dificultad.
Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados
máximos, lo que implica que desde el principio el visitante sea capaz de usar de forma intuitiva los
recursos que se le ofrecen.
El color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser
suficientemente grande. Los colores han de utilizarse con precaución de forma que el contenido sea
legible. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la
consistencia entre los diseños facilita al usuario el uso de un sitio. Revisa los enlaces
periódicamente para evitar enlaces rotos o enlaces a webs que ya no existen.
Evita en la medida de lo posible elementos invisibles de navegación como pueden ser los menús
desplegables, indicaciones ocultas, etc. Pueden quedar estéticamente atractivos una vez
descubiertos, pero obligan al usuario a adivinar dónde están colocados y cómo se utilizan. Los
visitantes no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no
sabe donde comenzar a leer, existe sobrecarga de información.
Ofrece de forma clara a los usuarios de tu web un medio de contacto con el administrador, esto
mejora la opinión sobre la web al no encontrarse sólo ante las posibles dificultades que puedan
surgir y fomenta la comunicación entre el diseñador y el potencial cliente. Para ello es muy útil
utilizar formularios implementados directamente en el sitio web, ya que evitas al visitante tener que
abrir su gestor de correo electrónico y le ahorras tiempo.
Además, algunos consejos concretos para diferentes partes de la web son:
 Cabeceras del sitio: incluir solo las opciones fundamentales, que estén bien definidas tanto
en su significado como en su representación. Evita imágenes grandes y pesadas (tamaño)
pues te restan espacio para poner contenidos y demoran la carga de la página.
 Registro de usuarios: permite que tus usuarios naveguen por la web sin necesidad de
registrarse, ofréceles información útil para que sepan qué ofreces en tu página. Por ejemplo,
permite el libre acceso a la consulta de las subastas antes de pujar, consulta de los catálogos
de tus productos y poder buscar en todo el sitio antes de registrarse. Puedes crear secciones
exclusivas para usuarios dándoles motivos para que se registren cuando quieran, por
ejemplo, para adquirir un producto de tu catálogo o para la descarga de software. Simplifica
el formulario de registro, solicita sólo la información necesaria.
 Formularios: procura reducir al máximo el numero de campos, no pidas información que
no necesitas sólo por tenerla. Tener que rellenar formularios de registro muy grandes puede
hacer que algunos visitantes cambien de opinión y dejen tu página. Piensa que cuanto más
corto es, menos pereza da rellenarlo. Evita los combos, es más rápido escribir que
seleccionar la opción en el combo, además la página pesará menos sin ellos por lo que el
usuario acabará antes el proceso.
 Enlaces: procura que la palabra enlazada indique claramente el destino. Por ejemplo, para
enlazar una página de diseño web:
Bien: entra en la página de diseño web para ver más información.
Mal: para ver más información sobre diseño web pincha aquí.
 Color de fondo: si el texto es extenso, es recomendable usar un fondo claro
(preferiblemente blanco) y texto oscuro (preferiblemente negro).
  Velocidad de carga de la página: reduciendo el peso de la página podemos hacer que el
usuario visite más páginas en el mismo tiempo de conexión. En un sitio donde las páginas
bajan con rapidez no da pereza pinchar en los enlaces para seguir leyendo. Añadir
demasiados elementos gráficos o códigos muy complejos sólo genera páginas más lentas,
por lo que nadie va a apreciar la mejora si al final la web tarda mucho en cargar. Puedes
calcular el tiempo de carga de tu página web y decidir si neesitas optimizar imágenes,
código JavaScript, etc.
 Buscador: si tienes una web con muchas páginas (incluso si no) puedes ser muy útil
proporcionar un buscador interno para que tus visitantes puedan moverse con más facilidad
y encontrar rápidamente la información que están buscando. Hay buscadores gratuitos muy
buenos, como atomz.com.

Manual de SEO
Índice [ RSS de la categoría ]

Análisis de palabras clave para un buen posicionamiento en buscadores

Analizar cuáles son las mejores palabras clave para una web es de extrema importancia en el
posicionamiento de la misma en los buscadores.
Importancia del título en el posicionamiento web
El título de una página web es clave a la hora de posicionar el sitio en buscadores. El título debe ser
descriptivo y contener palabras clave.
Encontrar palabras clave relevantes: herramientas (parte 2)
Veamos como escoger entre un grupo e palabras clave aquellas para las que nos posicionaremos.
Para ello usaremos algunas herramientas SEO.
Encontrar palabras clave relevantes (parte 1)
La búsqueda de palabras clave relevantes es fundamental para crear una estrategia de
posicionamiento web efectiva. Aprende a seleccionar las mejores.
Qué es el efecto Sandbox de Google
En qué consiste exactamente el famoso efecto Sandbox implementado por Google para combatir el
spam.
Sandbox. Cuánto dura y cómo salir del sandbox
Cuanto dura el efecto Sandbox, como saber si estás en Sandbox y como salir de él. El famoso efecto
que afecta a webs de nueva creación.
Backlinks o enlaces externos: los enlaces entrantes a tu web
Posicionamiento web en buscadores: Aprende a conseguir buenos enlaces (backlinks o enlaces
externos) hacia tu web.
Técnicas de Posicionamiento y técnicas penalizadas
Posicionamiento web en buscadores. Guía sobre las tácticas más comúnmente penalizadas por los
buscadores.
Técnicas de posicionamiento web en los buscadores
Estrategias de posicionamiento web en buscadores. Factores de optimización relevantes para
conseguir un buen posicionamiento.
Iniciación al posicionamiento web en los buscadores
Guía de posicionamiento web en buscadores. Factores relevantes para ser el primero en Google y
otros buscadores.

 Posicionamiento Web
 Posicionamiento Web básico
 Técnicas Posicionamiento
 Técnicas SEO penalizadas
 Backlinks (enlaces)
 Encontrar palabras clave
 Herramientas palabras clave
 Qué es el Sandbox
 Salir del Sandbox
 Temas Relacionados
 Artículos Posicionamiento
 Videos de Posicionamiento
 Blog Posicionamiento
 Herramientas SEO
 Alojamiento Web
 Promocionar Web
 Marketing en Internet
 Blog de Diseño Web
 Directorio Webmasters

Packs VPS RESELLERS 26,91 €/mes

Marca Blanca - Automatizado
Panel Plesk Dominios ilimitados
Instalador de software (Joomla, Wordpress...)
20% descuento en Registro de Dominios y Servicios

Pruébalo GRATIS 15 días...!! Garantía 1 mes

www.singularweb.com
Como planificar una página web

Una vez has establecido tu nicho de mercado y has analizado tu audiencia el siguiente paso es
planificar los recursos de la web.
Muchas páginas web son desarrolladas sobre la marcha sin una planificación concreta de sus
objetivos y recursos. Como consecuencia, muchos sitios duran poco en Internet perdiendo la
oportunidad de convertirse en buenos proyectos. Pensar antes de actuar, y estar seguros de que
tenemos los recursos, capacidades y posibilidades suficientes para hacer que un proyecto tenga
éxito, son partes fundamentales (y olvidadas) del diseño web.
Este proceso inicial implica elegir un tipo determinado de audiencia y unos objetivos claros.

Productos y objetivos
Debes elegir el producto que vas a ofrecer a tus visitantes, ya sea información, objetos físicos o
servicios. ¿Es algo que vas a hacer desde casa o necesitas un soporte externo?, ¿quién gestionará la
venta?… También sería bueno tener una idea de lo que quieres conseguir con tu web, montar un
negocio, una web informativa, pasar el rato…

Recursos
 ¿Soy capaz yo solo de hacer una web?: si la respuesta es no, ya puedes empezar a aprender
HTML y estudiar tutoriales como éste. Descubrirás que el diseño web no es tan difícil como
en un principio parece.
 ¿Qué ancho de banda necesito?: normalmente al empezar un proyecto pequeño con 1 GB
tendrás suficiente, pero hay calculadoras muy buenas que te pueden ayudar a estimar el
ancho de banda que necesitarás.
 ¿Cuánto espacio para almacenar la web?: por lo general no necesitarás más de 100 ó 200
MB para empezar y te sobrará.
 ¿De cuánto dinero dispongo?: hoy en día no hace falta gastarse mucho dinero para tener una
página en Internet. El precio de los dominios es asequible para la mayoría y los servicios de
alojamiento web también tienen precios competitivos. Por lo demás, deberás decidir si gastar
una parte de tu presupuesto en publicidad como Adsense o a otro tipo de servicios como
listas de correo y demás. Obviamente, con un poco de paciencia se pueden encontrar un
montón de buenos servicios gratuitos, no compres lo primero que encuentres.

Tecnología
 ¿Con qué lenguaje desarrollo la página web?: para páginas estáticas que no se actualizan
muy a menudo, el HTML es más que suficiente, pero si planeas tener una página muy
actualizada y con contenido dinámico es mejor decantarse por lenguajes como PHP o ASP.
 ¿Qué tipo de soporte voy a proporcionar?: es importante incluir funcionalidades en la página
web que faciliten la comunicación con el usuario. Imprescindible un formulario de contacto
o el área de preguntas frecuentes, como opcionales los foros o chats pueden añadir valor a la
 web.
 ¿Voy a utilizar registro de usuarios?: si vas a ofrecer secciones exclusivas para usuarios o
cosas así, la tecnología necesaria será más complicada que para hacer una página basada en
html, necesitarás trabajar con bases de datos.
 ¿Cómo analizo el uso de mi web?: necesitas analizar tu audiencia para saber si vas por buen
camino. No se puede crear una web de éxito a ciegas, es importante que utilices un sistema
de estadísticas web que te oriente en las decisiones que tomes acerca de tu web. Uno gratuito
bastante bueno es StatCounter.

Encontrar un nicho de mercado rentable para

tu página web
Si quieres hacerte un hueco en la sobrecargada Red, tendrás que escoger muy bien tu nicho de
mercado, es decir, tendrás que dirigirte a un público muy específico dentro de un tema
concreto. Por ejemplo, el tema del automovilismo está bastante explotado en Internet, pero puedes
centrarte en algo específico dentro de este mercado que no tenga tanta oferta (competencia), como
podrían ser coches de la marca A. Puedes seguir afinando un poco más y centrarte en hacer
únicamente revisiones de coches de la marca A, o incluso más y hacer sólo revisiones de
monovolúmenes de la marca A. Tal vez en un nicho de mercado tan específico tengas más
oportunidades de destacar.
Por lo dicho hasta ahora tal vez puedas pensar que al centrarte en algo tan concreto el número de
potenciales usuarios es mucho menor que hablando de todos los coches de la marca A. En parte
llevas razón, hay muchas más búsquedas relacionadas con todos los coches que sólo con
monovolúmenes, pero eso al fin y al cabo no es importante si no vas a conseguir estar el primero en
buscadores para las búsquedas que te interesan. No tiene importancia que mucha gente busque
sobre ese tema si no te van a encontrar a ti. En cambio, centrándote en un nicho más pequeño,
aunque haya menos potenciales visitantes tienes más probabilidades de que lleguen a tu web
porque no hay tanta competencia.
El verdadero potencial se encuentra en los nichos pequeños, ahí es donde puedes conseguir un éxito
aceptable. Además, hacer una web sobre un tema muy genérico implica mucho más esfuerzo. Todo
el material que hay que reunir, la elaboración de textos, el tiempo que requiere… Es mejor
profundizar mucho en un tema y ser el mejor en él, que intentar abarcar demasiado y no destacar en
nada.
La clave es esta: no intentes contentar a todo el mundo, conviértete en un especialista.

Razones por las que un nicho de mercado pequeño es bueno

para ti
 Puedes concentrar tus esfuerzos en un tema concreto para ofrecer cosas novedosas, dar
mucha información y destacar.
 El posicionamiento en buscadores te será más fácil al centrarte en un mercado en el que no
hay tanta competencia como para otros más genéricos.
 Es más fácil definir el público objetivo. Al ser un tema muy concreto, definir el tipo de
audiencia y centrarte en lo que necesitan es más sencillo.
  Los esfuerzo y recursos requeridos para desarrollar un proyecto así son menores.
 Trabajar para un tema genérico requiere conocimientos y tiempo que en la mayoría de los
casos no se tienen.
Para elegir tu nicho de mercado debes tener en cuenta tus hobbies, los temas que dominas, que te
gustan y te motivan. Tener ganas de trabajar en algo es la mejor manera de hacerlo bien. No elijas
un tema para tu web que no te interese o no te guste porque te acabarás aburriendo y la tarea
resultará desagradable.

Elegir el nicho de mercado adecuado

 El nicho de mercado adecuado es aquel en el que tienes posibilidades de tener una alta
visibilidad y accesibilidad a las personas que se beneficiarán de lo que ofreces.
 Es aquel en el que puedes emplear tu talento, tus conocimientos y es además una afición.

Cómo encontrar un buen nicho de mercado

 Encuentra temas o productos que te apasionen y conozcas en profundidad.
 Calcula las posibilidades de cada tema que hayas seleccionado anteriormente. Para eso:
 Determina la demanda: una forma de hacerlo puede ser elaborar una lista con las
palabras o frases relacionadas con cada tema e investigarlas con la herramienta de
palabras clave de Adwords. Esta herramienta te ofrece datos sobre el número de
búsquedas que pueden orientarte para saber si a la gente le interesa el tema o no.
 Determina la competencia: con la misma herramienta anterior puedes ver la
competencia que hay para cada palabra seleccionada. La clave está en elegir los
temas que tengan más demanda y menos competencia.
 Realiza sondeos: una vez hayas escogido uno o varios de los temas para tu página web en
base a los parámetros anteriores, es conveniente hacer una encuesta para estimar el grado de
aceptación que tendría tu página y decantarte por alguno. Hay páginas web como ya.com
que tienen montada toda una comunidad alrededor de las encuestas. Puedes poner tu
encuesta en estos sitios para intentar que la conteste el mayor número de personas posibles,
o también puedes preguntar en foros y zonas de debate.

Como organizar una página web. Diseño de la

estructura
Llegados a este punto necesita definir la organización de la información de tu sitio web. Es decir, ha
llegado el momento de crear la estructura de tu web, su esqueleto, la base que soportará todo lo
demás. La forma en que estructures el contenido de tu web será determinante para que los usuarios
encuentren o no lo que buscan (algo muy relacionado con la usabilidad). Por tanto, ésta debe
facilitar y agilizar al máximo la búsqueda de información de tus visitantes. Al mismo tiempo,
también es importante diseñar la estructura de forma que actualizaciones futuras de la web no
obliguen a cambiar muchas partes de la página.
Para crear la estructura, puede ser útil hacer un inventario de todo el material que vas a exponer en
la página e ir organizándolo en un primero momento por temas para después construir gráficamente
la estructura de la web.
Aunque poca gente lo hace, es muy útil construir varios prototipos (o bocetos) de tu web y probar la
reacción de los usuarios ante ellos. Esto de comprobar la reacción parece más complicado de lo que
crees, pero un método casero y sencillo que puede aportar información para saber si la estructura
del sitio es fácil de comprender y manejar, es hacer varias plantillas con diferentes estructuras y
pedir a amigos y familiares que naveguen por ellas y nos den su impresión. Cuál les resulta más
fácil de entender, más atractiva, en cuál se encuentra mejor una determinada información, en cuál
están más claros los contenidos a los que dirigen los enlaces, etc.

Página de inicio
La página de inicio es la principal puerta de entrada de visitas a tu página, por lo que debe poder
atrapar al mayor número de visitantes que entren. Para ello, debes adaptar su estructura a tu público
objetivo, haciendo bien visibles los contenidos que más pueden interesarles. También es importante
dejar claro desde el principio el tema de la web, y para eso la página de inicio es una buena
herramienta. Especifica claramente qué se va a encontrar el usuario al explorar tu página, a la gente
no le gusta perder el tiempo y a ti no te interesan visitas de este tipo porque no aportan ningún
beneficio a tu web.
Por otro lado, algo tan sencillo como incluir un enlace bien visible a la página principal en todas tus
páginas facilita muchísimo la navegación. En este sentido, algo que se usa mucho y también ayuda
a los usuarios a navegar por tu web es poner un enlace en el banner o logo de la cabecera que
apunte a la página principal del sitio.

Diseño del menú de navegación

Una de las cosas más importantes a la hora de estructurar la página es el diseño del menú de
navegación.
Echa un vistazo a la estructura inicial que creaste, ¿cuáles son las secciones más grandes?, ¿cuáles
agrupan más contenido?, esas pueden ser las secciones que incluyas en el menú principal y que
sería conveniente que aparecieran en cada página de tu web para facilitar la navegación. Ahora bien,
una vez dentro de cada sección concreta, el menú puede modificarse para mostrar las opciones
específicas que ofrece esa sección (además de enlaces a las secciones principales).
No hay que olvidar que otro tipo de páginas como información acerca de la web, aviso legal,
política de privacidad, formulario de contacto, etc, deben estar convenientemente visibles, por lo
que muchas páginas optan por incluir un menú horizontal a pie de página para enlazar con estas
secciones.

Tipos de estructuras de sitios web

Ya se han comentado en este tutorial los principales tipos de estructuras que se usan en la web, si te
interesa puedes echarle un vistazo al artículo:
 Estructurar el contenido de la página web.

Sistema de navegación de la página web

Un buen sistema de navegación es imprescindible en toda página web. Es una parte importante de
la organización de la estructura de la web. Que el usuario sea capaz de moverse con soltura y
facilidad por las distintas páginas del sitio, que encuentre lo que busca rápidamente, que no se
pierda yendo de un enlace a otro sin saber donde está, que no quede colgado en una página concreta
sin poder navegar por otras o volver atrás… son algunas de los aspectos que hay que cuidar en la
navegación de un sitio web. Veamos algunos puntos importantes.

La página de inicio
La página de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarán la mayor
parte de visitantes, por lo que hay que cuidar al máximo cada detalle.
Si tu sitio web es pequeño, puedes permitirte el lujo de enlazar a todas las páginas de tu web desde
la página principal, así el usuario tiene a su alcance toda la información disponible en el sitio. Pero
en muchos casos incluir un enlace a cada página convertiría en un caos a la portada del sitio debido
a la gran cantidad de páginas internas. En estos casos lo más conveniente sería enlazar a las
secciones principales de la web, desde las cuales se enlazaría al contenido de esa sección concreta,
etc.

Menú de navegación
El menú de una página web es la principal herramienta de navegación que le podemos facilitar al
visitante para que encuentre lo que busca. Es imprescindible para que las personas encuentren las
demás páginas de la web, además del índice.
Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o secciones de
la web. De su estructuración dependerá en gran medida que los visitantes encuentren lo que buscan,
por lo que es conveniente pensarse dos veces cómo hacerlo antes de implementarlo en la web.
Hay varios tipos de menús de navegación; podemos encontrarlos en disposición horizontal;

O vertical;

Como mencionamos antes, para sitios web con un número de páginas pequeño puede ser bueno
enlazar a todas ellas desde cada página para que el usuario tenga en todo momento la información
disponible en la web a su alcance. Por ejemplo, si es una página web informativa sobre tu empresa y
no tiene otra finalidad, puede que cuente con 10 ó 15 páginas en total, las cuales pueden
perfectamente ser enlazadas desde cada página individual. Sin embargo, cuando una web contiene
mucha información este tipo de menús tiene poco sentido, porque entonces tendríamos menús con
cientos de enlaces, algo excesivamente largo para ser usable. Lo normal en estos casos es enlazar
desde la página principal a las secciones más importantes, y desde cada una de ellas a sus
contenidos concretos.

Pie de página
El pié de página de la web también puede usarse para mejorar la navegación del sitio. Normalmente
no se utiliza para poner enlaces a todas las secciones (para eso ya está el menú), pero sí para poner
enlaces importantes o que consideras que deben aparecer en todas las páginas de la web, por
ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc.

Evitar páginas huérfanas

Una página huérfana es aquella desde la cual no se puede acceder a ninguna otra. Cuando el usuario
se encuentra con una de estas páginas la confusión y el enfado pueden ser importantes. Es cierto que
dándole al botón “atrás” del navegador o modificando el campo de la url puede llegarse
perfectamente a otra página del sitio, pero no todo el mundo tiene porqué saberlo, y hacer a la gente
molestarse demasiado en navegar por un sitio es signo de falta de usabilidad web. No cuesta nada
poner en cada página al menos un enlace a la principal.

Enlazar siempre al índice

Una de las formas de evitar páginas huérfanas y que mejora sin duda la navegabilidad de una web
es incluir en cada página del sitio un enlace al índice.

Parece bastante extendido el enlazar a la página principal del sitio mediante el banner o logo de
cabecera. Así, el usuario siempre tiene un recurso para volver al principio y buscar lo que necesita.

Ruta de acceso o ¿dónde estoy?

Es frecuente que aunque el usuario pueda navegar con facilidad por las páginas de tu sitio no sepa
exactamente donde está. Para evitar esto es muy útil incluir el camino que se sigue desde la página
principal, pasando por las secciones (principales) hasta la página concreta en la que se encuentra el
usuario. No hace falta que indiques cada uno de los pasos, con los más importantes es suficiente, no
es cuestión de que se convierta en una guía interminable. Un ejemplo de esto lo encontramos en
LaWebera.es:

Es conveniente que cada parte de la ruta tenga su enlace correspondiente, de forma que el usuario
pueda ir a esa categoría si lo desea. Sin el enlace a cada sitio, la ruta de acceso pierde sentido ya que
le dice al usuario donde está pero no le da alternativas.

Incluir un buscador
Para páginas web con mucho contenido es realmente útil la inclusión de un buscador interno que
permita a los usuarios buscar directamente los temas que le interesan. Páginas web didácticas, de
manuales, etc. son sitios que tienen mucho contenido distribuido a su vez en muchas páginas.
Buscar una información concreta en ellas puede ser complicado dado el volumen de archivos que
contienen. Los buscadores mejor la experiencia del usuario en el sitio web y le ayudan a ahorrar
tiempo en su búsqueda de información.
Hay herramientas gratuitas muy buenas para poner un buscador en tu web. Por ejemplo: Google Co-
op o Atomz.

Creación de una página web desde cero con Adobe Dreamweaver CS4

La generación de una página web con Adobe Dreamweaver, puede hacerse empleando alguno de
los modelos prediseñados que aparecen en cuanto seleccionamos “Archivo / Nuevo…”, tal como se
explica en el artículo “Crear una nueva página web en Dreamweaver”. Sin embargo, en muchas
ocasiones y por diferentes circunstancias, podremos necesitar generar una página web diferente a
los modelos prediseñados.
Es por esta razón, que daremos un ejemplo de cómo realizar un diseño desde cero, comenzando con
una página en blanco, de forma que puedan conocer los procedimientos necesarios para realizar una
página web desde cero con Adobe Dreamweaver CS4.
Creación de la página y encabezado
El primer paso, como es de suponerse, es la creación de los archivos necesarios. Para crear el
archivo html, iremos a “Archivo / Nuevo…”. Cuando se abre el cuadro “Nuevo Documento”,
seleccionaremos “HTML”, y en la segunda columna, “ninguno”, con lo que estaremos creando un
archivo HTML sin un diseño predefinido. Más a la derecha, seleccionaremos el tipo de documento
que deseamos crear (para el ejemplo, XHTML 1.1).
Dado que se trata de un archivo HTML que no contiene formato alguno, no se tendrá la posibilidad
de crear un archivo CSS relacionado o insertar el código CSS en el <head>, lo que podremos hacer
posteriormente.
Una vez que hemos creado el archivo HTML, veremos que el mismo tiene el siguiente código:
view source

print?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
1
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
4
8" />
5 <title>Documento sin título</title>
6 </head>
7 <body>
8 </body>
9 </html>
Una vez que hemos creado el archivo, debemos guardarlo. Luego
crearemos el archivo CSS, para lo cual iremos a “Archivo / Nuevo…” y
haremos clic en la opción “CSS”. Al hacer clic en “Crear”, se
generará un archivo donde solo aparecerá la codificación de
caracteres y un comentario indicando el tipo de documento de que
se trata. Al igual que en el caso anterior, este archivo será
guardado. Para el ejemplo lo guardaremos en el mismo directorio
que se encuentra el archivo HTML con el nombre “estilo.css”.
Siguiendo los procedimientos descritos en el artículo “Dreamweaver. Propiedades de la página
web”, modificaremos las propiedades de la página en caso de ser necesario. También deberemos
darle título a la página (“Ejemplo”), que introduciremos en el campo que a tales efectos se
encuentra en la barra de herramientas.
Una vez que se han creado los archivos, deberemos comenzar a generar el encabezado de la página,
el cual tiene información muy relevante para el funcionamiento de la página y su posicionamiento,
que no es aportado por el encabezado que contiene por defecto.

Creando el encabezado
El encabezado, como podremos ver, contiene ya alguna información, como la codificación de
caracteres y el título de la página.
Pero esto es insuficiente para una página web normal, por las razones que ya hemos expuesto, de
modo que deberemos crear, entre otras cosas, las etiquetas “meta” que consideremos necesarias y el
vínculo del documento HTML con el archivo CSS.
Para crear una etiqueta “meta”, tendremos que ir a “Insertar / HTML / Etiquetas head”, ante lo
cual se abren seis posibilidades, que son etiquetas “meta”, palabras clave, descripción, actualizar,
base y vínculo.

Siguiendo un orden lógico en el encabezado, comenzaremos insertando la descripción de la

página, seleccionando la opción correspondiente en el menú descrito, tras lo que se abrirá un
cuadro muy sencillo donde tendremos un área de texto donde introduciremos la descripción de la
página. A continuación crearemos la etiqueta de las palabras clave, que se realiza tras abrirse un
cuadro similar al anterior, donde introduciremos las palabras o frases clave separadas por una coma,
tal como cuando escribimos el código directamente.
Luego, en caso de que la página lo requiera, se puede comenzar a introducir las etiquetas “meta”
que sean necesarias, a través de la opción correspondiente que se encuentra en el menú, que abre el
siguiente cuadro:

Ahora deberemos realizar uno de los pasos más importantes de toda la creación de los elementos del
encabezado, que es la vinculación del documento HTML con el archivo CSS. La posibilidad de
realizarlo se encuentra en el mismo menú que se crean el resto de las etiquetas del encabezado,
seleccionando en este caso, la opción “Vínculo”. Esta etiqueta también servirá llegado el momento
para introducir el favicon.

Una vez que completamos estos procedimientos, estamos prontos para iniciar el proceso de creación
del diseño de la página web.

Inicio de la creación del diseño

Los primeros pasos en la definición del diseño de la página, pueden comenzarse, como ya se ha
descrito en un artículo anterior, en “Modificar / Propiedades de la página”, donde se abre un
cuadro en el que, además de los parámetros básicos de la planta, se encuentran una serie de
elementos que están relacionados con el diseño de la página, como por ejemplo las propiedades del
elemento “body” y algunos estilos CSS elementales.
De todas formas, si hemos creado un archivo CSS, no es conveniente emplear esta opción, ya que el
código CSS generado por este método se incluyen dentro de las etiquetas “head” y en el propio
elemento “body”.

Definición de los atributos de “body”

Los atributos de la etiqueta “body”, define las propiedades de todos aquellos elementos que están
incluidos dentro de ella, por lo que sus efectos, a menos que se defina otra cosa en los elementos
hijos, se verán en toda la página.
Para crear los atributos del elemento “body”, eliminando los que los navegadores definen por
defecto, se debe ir a la barra de herramientas “estilos CSS”, donde buscaremos, al pie de la misma,
el botón para crear una nueva regla.
Una vez que hemos seleccionado esta opción, se abre el cuadro para la creación de nuevas reglas
CSS, en el que seleccionaremos “Etiqueta” en “Tipo de selector”, “body” en “Nombre del selector”
y haremos clic en Aceptar.
En el cuadro que se abre, introduciremos todas las características básicas que serán válidas para
todo el documento, salvo que en elementos posteriores se definan otros parámetros. Para el ejemplo,
definiremos la familia de fuente como “Arial, Helvetica, Sans-Serif”, un tamaño de fuente de 12px,
el color de la misma en negro, definiremos el color de fondo de la página (blanco), margen y relleno
en 0px, dejando el resto de las opciones sin definir.

Creación de una capa contenedora

Cuando nos encontramos en el inicio del diseño, uno de los primeros pasos que debemos dar es la
definición de las características principales de la página. Una de estas características es el tipo de
diseño que llevaremos adelante, si se trata de un diseño de ancho fijo, elástico o flotante.
Para el caso del ejemplo, crearemos una capa contenedora de ancho fijo, pero el procedimiento
siguiente es similar para todos los casos, cambiando el tipo de unidades que se emplearán.
Como las características de la capa contenedora está definida en el archivo CSS, el primer paso es
crear la regla CSS en el archivo, para lo cual deberemos emplear la opción “Crear nueva regla” que
se encuentra en la parte inferior del cuadro “Estilos CSS”.

En el cuadro que muestra la imagen anterior, deberemos colocar el tipo de regla (id, class) y el
nombre de la misma. Una vez que introducimos estos datos y hacemos clic en Aceptar, se abre un
nuevo cuadro donde deberemos introducir los atributos de esta capa:

Para el caso del ejemplo, daremos un ancho de 800px, un color de fondo #eee, márgenes derecho e
izquierdo “auto” (para que la capa se centre), un relleno (padding) de 10px y bordes derecho e
izquierdo de 4px de ancho, sólido y de color #999.

Introducción de la capa contenedora en el archivo HTML

Una vez que hemos definido los atributos que tendrá la capa contenedora, solo resta introducir la
misma dentro del archivo HTML y generar algún contenido de ejemplo, para que veamos como
queda, que en el ejemplo que estamos desarrollando se trata de un texto.
La vista de la página quedará como se ve en la imagen inferior, y tras lo cual, podremos comenzar a
definir la maquetación de la página y la inclusión de los elementos componentes de la misma,
procedimientos que se describirán en un artículo posterior.

Especificación HTML 4.01

(HTML 4.01 Specification)
Recomendación del W3C 24 de diciembre de 1999

Resumen
Esta especificación define el Lenguaje de Formato de Documentos para Hipertexto (HyperText
Markup Language, HTML), el lenguaje de publicación de la World Wide Web. Esta especificación
define HTML 4.01, que es una versión de HTML 4. Además de las características relativas a texto,
multimedia e hipervínculos de las versiones anteriores de HTML (HTML 3.2 [HTML32] y HTML
2.0 [RFC1866]), HTML 4 soporta más opciones de multimedia, lenguajes de scripts, hojas de estilo,
mejores capacidades de impresión, y documentos más accesibles a usuarios con discapacidades.
HTML 4 también da un gran paso adelante hacia la internacionalización de los documentos, con la
intención de hacer la Web auténticamente universal.
HTML4 es una aplicación de SGML conforme al estándar internacional ISO 8879 -- Standard
Generalized Markup Language [ISO8879].

Estado de este documento

Esta sección describe el estado de este documento en la fecha de su publicación. Otros documentos
pueden reemplazar a este documento. En el W3C se conserva el estado más reciente de esta serie
de documentos.
Este documento especifica HTML 4.01, que es parte de la línea de especificaciones de HTML 4. La
primera versión de HTML 4 fue HTML 4.0 [HTML40], publicado el 18 de diciembre de 1997 y
revisado el 24 de abril de 1998. Esta especificación es la primera Recomendación HTML 4.01.
Incluye cambios no editoriales desde la versión del 24 de abril de HTML 4.0. Por ejemplo, se han
hecho algunos cambios en los DTDs. Con este documento quedan obsoletas las versiones previas de
HTML 4.0, aunque el W3C seguirá poniendo a disposición del público dichas especificaciones y
sus DTDs en su sitio web.
Este documento ha sido revisado por Miembros del W3C y otras partes interesadas y ha sido
aprobado por el Director como Recomendación del W3C. Es un documento estable y puede ser
usado como material de referencia o citado como referencia normativa en otros documentos. La
intención del W3C al hacer esta Recomendación es llamar la atención sobre la especificación y
promover su difusión general.
El W3C recomienda que los agentes de usuario y los autores (y en particular las herramientas de
creación) produzcan documentos HTML 4.01 en vez de documentos HTML 4.0. El W3C
recomienda que los autores produzcan documentos HTML 4 en vez de documentos HTML 3.2. Por
razones de compatibilidad con versiones anteriores, el W3C también recomienda que las
herramientas que interpreten HTML 4 sigan dando soporte a HTML 3.2 y a HTML 2.0.
Para obtener información sobre la próxima generación de HTML, "El Lenguaje Extensible para el
Formato de Documentos de Hipertexto" [XHTML], consulte las Actividades del W3C en el campo
del HTML y la lista de Informes Técnicos del W3C.
Este documento ha sido producido como parte de las Actividades del W3C en el campo del HTML.
Los objetivos del Grupo de Trabajo HTML se plantean en la carta constitucional del Grupo de
Trabajo HTML.
Puede encontrarse una lista de las Recomendaciones actuales del W3C y otros documentos técnicos
en http://www.w3.org/TR.
En la lista de correo www-html@w3.org se discuten públicamente las características del HTML
(archivos de www-html@w3.org).

Idiomas disponibles
La versión en inglés de esta especificación es la única versión normativa. Sin embargo, para
traducciones de este documento, véase http://www.w3.org/MarkUp/html4-updates/translations.

Erratas
La lista de errores conocidos de la versión original en inglés de esta especificación está disponible
en:
 http://www.w3.org/MarkUp/html4-updates/errata

Le rogamos informe de errores en la versión original en inglés de este documento a www-html-

editor@w3.org.
Nota: La correción de estas erratas ya ha sido tenida en cuenta en la traducción al castellano del
documento. Para informar sobre errores presentes en la traducción española de la especificación,
puede ponerse en contacto con el traductor en jrpozo@conclase.net. Gracias por su colaboración.

Tabla abreviada de contenidos

1. Sobre la especificación HTML 4
2. Introducción a HTML4
3. Sobre SGML y HTML
4. Conformidad: requisitos y recomendaciones
5. Representación de documentos HTML - Conjuntos de caracteres, codificaciones de
caracteres y entidades
6. Tipos de datos básicos de HTML - Datos de caracteres, colores, longitudes, URIs, tipos de
contenido, etc.
7. La estructura global de un documento HTML - La cabecera (HEAD) y el cuerpo (BODY) de
un documento
8. Información sobre el idioma y la dirección del texto - Consideraciones internacionales
sobre el texto
9. Texto - Párrafos, líneas y frases
10. Listas - Listas ordenadas, no ordenadas y de definiciones
11. Tablas
12. Vínculos - Hipertexto y vínculos independientes del medio
13. Objetos, Imágenes y Aplicaciones
14. Hojas de Estilo - Añadir estilo a los documentos HTML
15. Alineación, estilos de fuente y separadores horizontales
16. Marcos - Presentación multivista de documentos
17. Formularios - Formularios para entrada de datos por el usuario: campos de texto,
botones, menúes, etc.
18. Scripts - Documentos animados y formularios inteligentes
19. Información de referencia sobre SGML para HTML - Definición formal y validación
de HTML
20. Declaración SGML de HTML 4
21. Definición del Tipo de Documento (Document Type Definition)
22. Definición del Tipo de Documento Transicional (Transitional Document Type
Definition)
23. Definición del Tipo de Documento con Marcos (Frameset Document Type
Definition)
24. Referencias a entidades de caracteres en HTML 4
A. Cambios
B. Aplicación, Implementación y Notas de Diseño
 Referencias
 Índice de Elementos
 Índice de Atributos
 Índice
Tabla completa de contenidos
1. Sobre la especificación HTML 4
1. Cómo está organizada la especificación
2. Convenciones del documento
1. Elementos y atributos
2. Notas y ejemplos
3. Agradecimientos
1. Agradecimientos por la revisión actual
4. Aviso de Copyright
2. Introducción a HTML 4
1. ¿Qué es la World Wide Web?
1. Introducción a los URIs
2. Identificadores de fragmento
3. URIs relativos
2. ¿Qué es el HTML?
1. Breve historia del HTML
3. HTML 4
1. Internacionalización
2. Accesibilidad
3. Tablas
4. Documentos compuestos
5. Hojas de estilo
6. Scripts
7. Impresión
4. Creación de documentos con HTML 4
1. Separar estructura y presentación
2. Considerar la accesibilidad universal a la Web
3. Ayudar a los agentes de usuario con la representación incremental
3. Sobre SGML y HTML
1. Introducción al SGML
2. Estructuras SGML usadas en HTML
1. Elementos
2. Atributos
3. Referencias de caracteres
4. Comentarios
3. Cómo leer el DTD de HTML
1. Comentarios DTD
2. Definiciones de entidades paramétricas
3. Declaraciones de elementos
 Definiciones del modelo de contenido
4. Declaraciones de atributos
 Entidades DTD en definiciones de atributos
 Atributos booleanos
4. Conformidad: requisitos y recomendaciones
1. Definiciones
2. SGML
3. El tipo de contenido text/html
5. Representación de Documentos HTML - Conjuntos de caracteres, codificaciones de
caracteres y entidades
1. El Conjunto de Caracteres del Documento
2. Codificaciones de caracteres
 1. Elección de una codificación
 Notas sobre codificaciones específicas
2. Especificación de la codificación de caracteres
3. Referencias de caracteres
1. Referencias numéricas de caracteres
2. Referencias a entidades de caracteres
4. Caracteres no representables
6. Tipos de datos básicos de HTML - Datos de caracteres, colores, longitudes, URIs, tipos de
contenido, etc.
1. Mayúsculas y minúsculas
2. Tipos básicos de SGML
3. Cadenas de texto
4. URIs
5. Colores
1. Notas sobre el uso de colores
6. Longitudes
7. Tipos de contenido (tipos MIME)
8. Códigos de idioma
9. Codificaciones de caracteres
10. Caracteres individuales
11. Fechas y horas
12. Tipos de vínculos
13. Descriptores de medios
14. Datos de scripts
15. Datos de hojas de estilo
16. Nombres de marcos destino
7. La estructura global de un documento HTML - La cabecera (HEAD) y el cuerpo (BODY) de
un documento
1. Introducción a la estructura de un documento HTML
2. Información sobre la versión de HTML
3. El elemento HTML
4. La cabecera del documento
1. El elemento HEAD
2. El elemento TITLE
3. El atributo title
4. Metadatos
 Especificación de metadatos
 El elemento META
 Perfiles de metadatos
5. El cuerpo del documento
1. El elemento BODY
2. Identificadores de elementos: los atributos id y class
3. Elementos en bloque y elementos en línea
4. Agrupación de elementos: los elementos DIV y SPAN
5. Encabezados: los elementos H1, H2, H3, H4, H5, H6
6. El elemento ADDRESS
8. Información sobre el idioma y la dirección del texto - Consideraciones internacionales
sobre el texto
1. Especificación del idioma del contenido: el atributo lang
1. Códigos de idioma
2. Herencia de los códigos de idioma
3. Interpretación de los códigos de idioma
 2. Especificación de la dirección del texto y de las tablas: el atributo dir
1. Introducción al algoritmo bidireccional
2. Herencia de la información sobre la dirección del texto
3. Especificación de la dirección del texto incluido
4. Anulación del algoritmo bidireccional: el elemento BDO
5. Referencias de caracteres para el control de la direccionalidad y de la unión
6. Efecto de las hojas de estilo en la bidireccionalidad
9. Texto - Párrafos, líneas y frases
1. Espacio en blanco
2. Texto estructurado
1. Elementos de frase: EM, b, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR
y ACRONYM
2. Citas: Los elementos BLOCKQUOTE y Q
 Representación de citas
3. Subíndices y superíndices: los elementos SUB y SUP
3. Líneas y párrafos
1. Párrafos: el elemento P
2. Control de los saltos de línea
 Forzar un salto de línea: el elemento BR
 Impedir un salto de línea
3. División de palabras
4. Texto preformateado: el elemento PRE
5. Representación visual de los párrafos
4. Anotación de cambios en los documentos: los elementos INS y DEL
10. Listas - Listas ordenadas, no ordenadas y de definiciones
1. Introducción a las listas
2. Listas no ordenadas (UL), listas ordenadas (OL), y objetos de lista (LI)
3. Listas de definiciones: los elementos DL, DT y DD
1. Representación visual de las listas
4. Los elementos DIR y MENU
11. Tablas
1. Introducción a las tablas
2. Elementos para construir tablas
1. El elemento TABLE
 Direccionalidad de tablas
2. Títulos de tablas: el elemento CAPTION
3. Grupos de filas: los elementos THEAD, TFOOT y TBODY
4. Grupos de columnas: los elementos COLGROUP y COL
 El elemento COLGROUP
 El elemento COL
 Cálculo del número de columnas de una tabla
 Cálculo de la anchura de las columnas
5. Filas de una tabla: el elemento TR
6. Celdas de una tabla: los elementos TH y TD
 Celdas que abarcan varias filas o columnas
3. Formato de tablas por agentes de usuario visuales
1. Bordes y líneas de división
2. Alineación horizontal y vertical
 Herencia de las especificaciones de alineación
3. Márgenes de las celdas
4. Representación de tablas por agentes de usuario no visuales
1. Asociación de información de encabezado con celdas de datos
 2. Categorización de celdas
3. Algoritmo para encontrar información de encabezado
5. Tabla de muestra
12. Vínculos - Hipertexto y vínculos independientes del medio
1. Introducción a los vínculos
1. Visitar un recurso vinculado
2. Otras relaciones de vínculo
3. Especificación de vínculos
4. Títulos de vínculos
5. Internacionalización y vínculos
2. El elemento A
1. Sintaxis de nombres de vínculos
2. Los vínculos anidados son ilegales
3. Vínculos con el atributo id
4. Recursos no disponibles o no identificables
3. Relaciones entre documentos: el elemento LINK
1. Vínculos directos e inversos
2. Vínculos y hojas de estilo externas
3. Vínculos y motores de búsqueda
4. Información sobre la ruta de acceso: el elemento BASE
1. Cómo completar los URIs relativos
13. Objetos, Imágenes y Aplicaciones
1. Introducción a los objetos, imágenes y aplicaciones
2. Incluir una imagen: el elemento IMG
3. Inclusión genérica: el elemento OBJECT
1. Reglas para representar objetos
2. Inicialización de objetos: el elemento PARAM
3. Esquemas globales de nombres para objetos
4. Declaración y creación de un objeto
4. Incluir un applet: el elemento APPLET
5. Notas sobre la inclusión de documentos
6. Mapas de imágenes
1. Mapas de imágenes en el lado del cliente: los elementos MAP y AREA
 Ejemplos de mapas de imágenes en el lado del cliente
2. Mapas de imágenes en el lado del servidor
7. Presentación visual de imágenes, objetos y aplicaciones
1. Anchura y altura
2. Espacio en blanco alrededor de imágenes y objetos
3. Bordes
4. Alineación
8. Cómo especificar texto alternativo
14. Hojas de estilo - Añadir estilo a los documentos HTML
1. Introducción a las hojas de estilo
2. Añadir estilos al HTML
1. Especificación del lenguaje de hojas de estilo por defecto
2. Información de estilo en línea
3. Información de estilo en cabecera: el elemento STYLE
4. Tipos de medios
3. Hojas de estilo externas
1. Hojas de estilo preferentes y alternativas
2. Especificación de hojas de estilo externas
4. Hojas de Estilo en Cascada
 1. Cascadas dependientes del medio
2. Herencia y cascada
5. Ocultar datos de estilo a los agentes de usuario
6. Vínculación de hojas de estilo mediante encabezados HTTP
15. Alineación, estilos de fuente y separadores horizontales
1. Formato
1. Color de fondo
2. Alineación
3. Objetos flotantes
 Hacer flotar a un objeto
 Texto flotante alrededor de un objeto
2. Fuentes
1. Elementos de estilo de fuente: los elementos TT, I, B, BIG, SMALL,
STRIKE, S y U
2. Elementos de modificación de fuentes: FONT y BASEFONT
3. Separadores: el elemento HR
16. Marcos - Presentación multivista de documentos
1. Introducción a los marcos
2. Disposición de los marcos
1. El elemento FRAMESET
 Filas y Columnas
 Anidamiento de grupos de marcos
 Compartir datos entre marcos
2. El elemento FRAME
 Especificación de los contenidos iniciales de un marco
 Representación visual de un marco
3. Especificación de información sobre el marco destino
1. Especificación del destino de los vínculos por defecto
2. Semántica de marcos destino
4. Contenido alternativo
1. El elemento NOFRAMES
2. Descripciones largas de marcos
5. Marcos en línea: el elemento IFRAME
17. Formularios - Formularios para entrada de datos por el usuario: campos de texto,
botones, menúes, etc.
1. Introducción a los formularios
2. Controles
1. Tipos de controles
3. El elemento FORM
4. El elemento INPUT
1. Tipos de controles creados con INPUT
2. Ejemplos de formularios con controles INPUT
5. El elemento BUTTON
6. Los elementos SELECT, OPTGROUP y OPTION
1. Opciones preseleccionadas
7. El elemento TEXTAREA
8. El elemento ISINDEX
9. Rótulos
1. El elemento LABEL
10. Añadir estructura a los formularios: los elementos FIELDSET y LEGEND
11. Dirigir el foco hacia un elemento
1. Navegación con tabulador
 2. Teclas de acceso
12. Controles deshabilitados y de sólo lectura
1. Controles deshabilitados
2. Controles de sólo lectura
13. Envío de formularios
1. Método de envío del formulario
2. Controles con éxito
3. Procesamiento de los datos del formulario
 Paso uno: Identificación de los controles con éxito
 Paso dos: Construcción del conjunto de datos del formulario
 Paso tres: Codificación del conjunto de datos del formulario
 Paso cuatro: Envío del conjunto de datos del formulario codificado
4. Tipos de contenido de formularios
 application/x-www-form-urlencoded
 multipart/form-data
18. Scripts - Documentos animados y formularios inteligentes
1. Introducción a los scripts
2. Diseño de documentos para agentes de usuario que soporten scripts
1. El elemento SCRIPT
2. Especificación del lenguaje de scripts
 El lenguaje de scripts por defecto
 Declaración local del lenguaje de un script
 Referencias a elementos HTML desde un script
3. Eventos intrínsecos
4. Modificación dinámica de documentos
3. Diseño de documentos para agentes de usuario que no soporten scripts
1. El elemento NOSCRIPT
2. Ocultar datos de scripts a los agentes de usuario
19. Información de referencia de SGML para HTML - Definición formal y validación de
HTML
1. Validación de documentos
2. Catálogo SGML de ejemplo
20. Declaración SGML de HTML 4
1. Declaración SGML
21. Definición del Tipo de Documento
22. Definición del Tipo de Documento Transicional
23. Definición del Tipo de Documento con Marcos
24. Referencias a entidades de caracteres en HTML 4
1. Introducción a las referencias a entidades de caracteres
2. Referencias a entidades de caracteres para caracteres de la ISO 8859-1
1. Lista de caracteres
3. Referencias a entidades de caracteres para símbolos, símbolos matemáticos y letras
griegas
1. Lista de caracteres
4. Referencias a entidades de caracteres para caracteres con significado en el código y
caracteres de internacionalización
1. Lista de caracteres
A. Cambios
1. Cambios entre la versión de HTML 4.0 del 24 de abril de 1998 y la versión de
HTML 4.01 del 24 de diciembre de 1999
1. Cambios en la especificación
  Cambios generales
 Sobre SGML y HTML
 Representación de Documentos HTML
 Tipos de datos básicos de HTML
 La estructura global de un documento HTML
 Información sobre el idioma y la dirección del texto
 Tablas
 Vínculos
 Objetos, Imágenes y Aplicaciones
 Hojas de estilo en documentos HTML
 Marcos
 Formularios
 Declaración SGML
 DTD Estricto
 Notas
 Referencias
2. Erratas corregidas
3. Pequeños errores tipográficos corregidos
4. Clarificaciones
5. Problemas conocidos de los navegadores
2. Cambios entre las versiones del 18 de diciembre de 1997 y del 24 de abril de 1998
1. Erratas corregidas
2. Pequeños errores tipográficos corregidos
3. Cambios entre HTML 3.2 y HTML 4.0 (18 de diciembre de 1997)
1. Cambios en los elementos
 Elementos nuevos
 Elementos desaprobados
 Elementos obsoletos
2. Cambios en los atributos
3. Cambios relacionados con la accesibilidad
4. Cambios relacionados con los metadatos
5. Cambios relacionados con el texto
6. Cambios relacionados con los vínculos
7. Cambios relacionados con las tablas
8. Cambios relacionados con las imágenes, objetos y mapas de imágenes
9. Cambios relacionados con los formularios
10. Cambios relacionados con las hojas de estilo
11. Cambios relacionados con los marcos
12. Cambios relacionados con los scripts
13. Cambios relacionados con la internacionalización
B. Notas sobre Aplicación, Implementación y Diseño
1. Notas sobre documentos no válidos
2. Caracteres especiales en valores de atributos URI
1. Caracteres no ASCII en valores de atributos URI
2. El signo & en valores de atributos URI
3. Notas de implementación de SGML
1. Saltos de línea
2. Especificación de datos no HTML
 Contenido de elementos
 Valores de atributos
3. Características de SGML con soporte limitado
 4. Atributos booleanos
5. Secciones marcadas
6. Instrucciones de procesamiento
7. Código abreviado
4. Cómo ayudar a los motores de búsqueda a indexar su sitio web
1. Motores de búsqueda
 El fichero robots.txt
 Los robots y el elemento META
5. Notas sobre tablas
1. Criterios de diseño
 Reformateo dinámico
 Representación incremental
 Estructura y presentación
 Grupos de filas y de columnas
 Accesibilidad
2. Algoritmos recomendados de composición
 Algoritmo de Composición Fija
 Algoritmo de Autocomposición
6. Notas sobre formularios
1. Representación incremental
2. Proyectos futuros
7. Notas sobre scripts
1. Sintaxis reservada para macros de scripts futuras
 Práctica actual en macros de scripts
8. Notas sobre marcos
9. Notas sobre accesibilidad
10. Notas sobre seguridad
1. Cuestiones de seguridad relacionadas con los formularios
 Referencias
1. Referencias normativas
2. Referencias informativas
 Índice de elementos
 Índice de atributos
 Índice
AVISO DE COPYRIGHT
Copyright © 1994-2001 World Wide Web Consortium, (Massachusetts Institute of Technology,
Institut National de Recherche en Informatique et en Automatique, Keio University). Todos los
derechos reservados. http://www.w3.org/Consortium/Legal/
Los titulares del copyright proporcionan los documentos públicos que se encuentran en el sitio web
del W3C de acuerdo con la siguiente Licencia. El software y las Definiciones de Tipo de
Documento (Document Type Definitions, DTDs) asociadas con las especificaciones del W3C están
gobernados por el aviso de copyright de Software.
Por el uso y/o la copia de este documento, usted (el beneficiario de la Licencia del copyright) está
de acuerdo en que ha leído, entendido y que respetará los siguientes términos y condiciones:
Se concede permiso para usar, copiar y distribuir los contenidos de este documento en cualquier
medio y para cualquier propósito sin necesidad del pago de fianzas ni royalties, siempre y cuando se
incluya la siguiente información en TODAS las copias de este documento, o partes del mismo, que
usted utilice:
 1. Un vínculo o URL al documento original del W3C.
2. El aviso de copyright pre-existente del autor original; caso de no existir éste, debería
utilizarse un aviso de la forma siguiente: "Copyright © [$fecha-del-documento] World Wide
Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en
Informatique et en Automatique, Keio University). All Rights Reserved.
http://www.w3.org/Consortium/Legal" (Preferiblemente en hipertexto, pero se permite una
representación en texto simple.)
3. Si existe, el STATUS o ESTADO del documento W3C.
Cuando el espacio lo permita, debería incluirse una copia del texto completo de esta NOTICIA. Le
instamos a que mencione a los autores en cualquier programa, documento, u otro artículo o
producto que usted cree como consecuencia de la implementación de los contenidos de este
documento o de cualquier parte del mismo.
Esta licencia no concede permiso para crear modificaciones o documentos derivados de documentos
del W3C. Sin embargo, caso de satisfacerse adicionales (documentados en el Copyright FAQ), el
W3C puede conceder permiso para crear modificaciones o documentos derivados a los individuos
que satisfagan dichos requisitos.
ESTE DOCUMENTO SE OFRECE "TAL COMO ESTÁ". LOS PROPIETARIOS DEL
COPYRIGHT NO HACEN GARANTÍAS NI REPRESENTACIONES DE NINGÚN TIPO,
EXPRESAS O IMPLÍCITAS, INCLUYENDO, AUNQUE SIN LIMITARSE A, LAS
GARANTÍAS DE COMERCIALIZACIÓN, ADECUACIÓN A UN PROPÓSITO ESPECÍFICO, O
TÍTULO; QUE LOS CONTENIDOS DEL DOCUMENTO SEAN APROPIADOS PARA
CUALQUIER PROPÓSITO; NI QUE LA IMPLEMENTACIÓN DE TALES CONTENIDOS NO
INFRINGIRÁ LAS PATENTES, DERECHOS DE AUTOR, MARCAS REGISTRADAS O
COMERCIALES U OTROS DERECHOS DE TERCERAS PERSONAS.
LOS PROPIETARIOS DEL COPYRIGHT NO SERÁN RESPONSABLES DE NINGÚN DAÑO
DIRECTO, INDIRECTO, ESPECIAL O CONSECUENTE DEBIDO A CUALQUIER USO DEL
DOCUMENTO O DEL FUNCIONAMIENTO O IMPLEMENTACIÓN DE LOS CONTENIDOS
DEL MISMO.
El nombre y marcas registradas de los propietarios del copyright NO pueden utilizarse en anuncios
o publicidad relativos a este documento o a sus contenidos sin un permiso previo por escrito. Los
derechos de autor de este documento pertenecerán en todo momento a los propietarios del
copyright.

Creación de una página web desde cero con

Adobe Dreamweaver CS4
La generación de una página web con Adobe Dreamweaver, puede hacerse empleando alguno de
los modelos prediseñados que aparecen en cuanto seleccionamos “Archivo / Nuevo…”, tal como se
explica en el artículo “Crear una nueva página web en Dreamweaver”. Sin embargo, en muchas
ocasiones y por diferentes circunstancias, podremos necesitar generar una página web diferente a
los modelos prediseñados.
Es por esta razón, que daremos un ejemplo de cómo realizar un diseño desde cero, comenzando con
una página en blanco, de forma que puedan conocer los procedimientos necesarios para realizar una
página web desde cero con Adobe Dreamweaver CS4.
Creación de la página y encabezado
El primer paso, como es de suponerse, es la creación de los archivos necesarios. Para crear el
archivo html, iremos a “Archivo / Nuevo…”. Cuando se abre el cuadro “Nuevo Documento”,
seleccionaremos “HTML”, y en la segunda columna, “ninguno”, con lo que estaremos creando un
archivo HTML sin un diseño predefinido. Más a la derecha, seleccionaremos el tipo de documento
que deseamos crear (para el ejemplo, XHTML 1.1).
Dado que se trata de un archivo HTML que no contiene formato alguno, no se tendrá la posibilidad
de crear un archivo CSS relacionado o insertar el código CSS en el <head>, lo que podremos hacer
posteriormente.
Una vez que hemos creado el archivo HTML, veremos que el mismo tiene el siguiente código:
view source

print?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
1
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
4
8" />
5 <title>Documento sin título</title>
6 </head>
7 <body>
8 </body>
9 </html>
Una vez que hemos creado el archivo, debemos guardarlo. Luego
crearemos el archivo CSS, para lo cual iremos a “Archivo / Nuevo…” y
haremos clic en la opción “CSS”. Al hacer clic en “Crear”, se
generará un archivo donde solo aparecerá la codificación de
caracteres y un comentario indicando el tipo de documento de que
se trata. Al igual que en el caso anterior, este archivo será
guardado. Para el ejemplo lo guardaremos en el mismo directorio
que se encuentra el archivo HTML con el nombre “estilo.css”.
Siguiendo los procedimientos descritos en el artículo “Dreamweaver. Propiedades de la página
web”, modificaremos las propiedades de la página en caso de ser necesario. También deberemos
darle título a la página (“Ejemplo”), que introduciremos en el campo que a tales efectos se
encuentra en la barra de herramientas.
Una vez que se han creado los archivos, deberemos comenzar a generar el encabezado de la página,
el cual tiene información muy relevante para el funcionamiento de la página y su posicionamiento,
que no es aportado por el encabezado que contiene por defecto.

Creando el encabezado
El encabezado, como podremos ver, contiene ya alguna información, como la codificación de
caracteres y el título de la página.
Pero esto es insuficiente para una página web normal, por las razones que ya hemos expuesto, de
modo que deberemos crear, entre otras cosas, las etiquetas “meta” que consideremos necesarias y el
vínculo del documento HTML con el archivo CSS.
Para crear una etiqueta “meta”, tendremos que ir a “Insertar / HTML / Etiquetas head”, ante lo
cual se abren seis posibilidades, que son etiquetas “meta”, palabras clave, descripción, actualizar,
base y vínculo.

Siguiendo un orden lógico en el encabezado, comenzaremos insertando la descripción de la

página, seleccionando la opción correspondiente en el menú descrito, tras lo que se abrirá un
cuadro muy sencillo donde tendremos un área de texto donde introduciremos la descripción de la
página. A continuación crearemos la etiqueta de las palabras clave, que se realiza tras abrirse un
cuadro similar al anterior, donde introduciremos las palabras o frases clave separadas por una coma,
tal como cuando escribimos el código directamente.
Luego, en caso de que la página lo requiera, se puede comenzar a introducir las etiquetas “meta”
que sean necesarias, a través de la opción correspondiente que se encuentra en el menú, que abre el
siguiente cuadro:

Ahora deberemos realizar uno de los pasos más importantes de toda la creación de los elementos del
encabezado, que es la vinculación del documento HTML con el archivo CSS. La posibilidad de
realizarlo se encuentra en el mismo menú que se crean el resto de las etiquetas del encabezado,
seleccionando en este caso, la opción “Vínculo”. Esta etiqueta también servirá llegado el momento
para introducir el favicon.

Una vez que completamos estos procedimientos, estamos prontos para iniciar el proceso de creación
del diseño de la página web.

Inicio de la creación del diseño

Los primeros pasos en la definición del diseño de la página, pueden comenzarse, como ya se ha
descrito en un artículo anterior, en “Modificar / Propiedades de la página”, donde se abre un
cuadro en el que, además de los parámetros básicos de la planta, se encuentran una serie de
elementos que están relacionados con el diseño de la página, como por ejemplo las propiedades del
elemento “body” y algunos estilos CSS elementales.
De todas formas, si hemos creado un archivo CSS, no es conveniente emplear esta opción, ya que el
código CSS generado por este método se incluyen dentro de las etiquetas “head” y en el propio
elemento “body”.

Definición de los atributos de “body”

Los atributos de la etiqueta “body”, define las propiedades de todos aquellos elementos que están
incluidos dentro de ella, por lo que sus efectos, a menos que se defina otra cosa en los elementos
hijos, se verán en toda la página.
Para crear los atributos del elemento “body”, eliminando los que los navegadores definen por
defecto, se debe ir a la barra de herramientas “estilos CSS”, donde buscaremos, al pie de la misma,
el botón para crear una nueva regla.
Una vez que hemos seleccionado esta opción, se abre el cuadro para la creación de nuevas reglas
CSS, en el que seleccionaremos “Etiqueta” en “Tipo de selector”, “body” en “Nombre del selector”
y haremos clic en Aceptar.
En el cuadro que se abre, introduciremos todas las características básicas que serán válidas para
todo el documento, salvo que en elementos posteriores se definan otros parámetros. Para el ejemplo,
definiremos la familia de fuente como “Arial, Helvetica, Sans-Serif”, un tamaño de fuente de 12px,
el color de la misma en negro, definiremos el color de fondo de la página (blanco), margen y relleno
en 0px, dejando el resto de las opciones sin definir.

Creación de una capa contenedora

Cuando nos encontramos en el inicio del diseño, uno de los primeros pasos que debemos dar es la
definición de las características principales de la página. Una de estas características es el tipo de
diseño que llevaremos adelante, si se trata de un diseño de ancho fijo, elástico o flotante.
Para el caso del ejemplo, crearemos una capa contenedora de ancho fijo, pero el procedimiento
siguiente es similar para todos los casos, cambiando el tipo de unidades que se emplearán.
Como las características de la capa contenedora está definida en el archivo CSS, el primer paso es
crear la regla CSS en el archivo, para lo cual deberemos emplear la opción “Crear nueva regla” que
se encuentra en la parte inferior del cuadro “Estilos CSS”.

En el cuadro que muestra la imagen anterior, deberemos colocar el tipo de regla (id, class) y el
nombre de la misma. Una vez que introducimos estos datos y hacemos clic en Aceptar, se abre un
nuevo cuadro donde deberemos introducir los atributos de esta capa:

Para el caso del ejemplo, daremos un ancho de 800px, un color de fondo #eee, márgenes derecho e
izquierdo “auto” (para que la capa se centre), un relleno (padding) de 10px y bordes derecho e
izquierdo de 4px de ancho, sólido y de color #999.

Introducción de la capa contenedora en el archivo HTML

Una vez que hemos definido los atributos que tendrá la capa contenedora, solo resta introducir la
misma dentro del archivo HTML y generar algún contenido de ejemplo, para que veamos como
queda, que en el ejemplo que estamos desarrollando se trata de un texto.
La vista de la página quedará como se ve en la imagen inferior, y tras lo cual, podremos comenzar a
definir la maquetación de la página y la inclusión de los elementos componentes de la misma,
procedimientos que se describirán en un artículo posterior.

Diseño de una página web con Adobe

Dreamweaver
En este artículo, veremos como iniciar una página web empleando Adobe Dreamweaver y daremos
los primeros pasos en el diseño de una página web. Este mismo ejemplo, seguiremos utilizándolo
posteriormente en otras prácticas sobre las diferentes funciones de Adobe Dreamweaver. Crear una
página web, necesariamente lleva muchos pasos y no pueden abarcarse en un solo artículo, por lo
que este será el primero de una serie.
Importante: El presente artículo está referido exclusivamente a la versión CS4. Versiones más
antiguas pueden no contar con todas las funciones que se nombren, pueden encontrarse diferencias
entre los códigos generados, etc., aunque es posible que la mayor parte del trabajo práctico pueda
llevarse a cabo con escasas diferencias.

Creación de los documentos

Todo el trabajo práctico que realizaremos, es posible hacerlo en un servidor. Sin embargo, los
primeros pasos en la creación de una página web con Adobe Dreamweaver es conveniente que
sean realizados en el propio ordenador. Para ello y a los efectos de mantener el trabajo ordenado,
crearemos un directorio que emplearemos para prácticas con este programa.
Acto seguido, ejecutaremos Adobe Dreamweaver, el cual nos mostrará su página inicial con todos
sus accesos directos. Para comenzar a trabajar, crearemos el documento HTML o XHTML. Para
ello haremos clic en Archivo / Nuevo… o haremos Ctrl + N; de inmediato se abrirá la ventana
“Nuevo documento”. En ella seleccionaremos, a la izquierda, “Página en blanco”. En la columna
titulada “Tipo de página”, seleccionaremos HTML. A continuación, deberemos seleccionar el tipo
de diseño que deseamos realizar.
Para el ejemplo, tomaremos el diseño a dos columnas elásticas con encabezado y pie de página. A
la derecha de la ventana seleccionaremos el tipo de documento (XHTML 1.1) y el lugar donde
desarrollaremos el CSS (Seleccionaremos “Crear nuevo archivo”). Una vez finalizado el proceso,
haremos clic en Crear.
Al hacer clic en Crear, se abrirá una ventana para el guardado del archivo CSS generado, que tiene
un nombre por defecto (twoColElsLtHdr.css), el cual cambiaremos por estilo.css. Luego
buscaremos el directorio creado para guardar nuestros archivos de prueba y haremos clic en
guardar. De inmediato, los archivos creados se abrirán en el espacio de trabajo, en una ventana
dividida que nos mostrará en la parte superior el código generado, y en la parte inferior la vista de
diseño, tal como muestra la imagen siguiente.

En esta imagen vemos que en la parte superior, debajo de la pestaña que indica la página en la que
nos encontramos trabajando, aparece un menú que sirve para alternar entre los diferentes archivos
de código (en este caso, el documento HTML y el archivo CSS).
Ahora debemos proceder a guardar el archivo HTML. En el código HTML, en su parte superior,
debemos ingresar un título. Dado que se trata de un ejemplo, la titularemos “Página de ejemplo”. El
título debemos colocarlo en el campo Título ubicado en la barra de herramientas ubicada encima de
la vista del código (ver imagen). Ahora procederemos al guardado, yendo a Arhivo / Guardar Como
o tecleando Ctrl + Mayús + S. Seleccionaremos el directorio que hemos creado para guardar los
archivos, en el campo Nombre sustituiremos el nombre por defecto por “index.html” y haremos
clic en guardar.

Modificando el diseño
Como vemos en la imagen anterior, la zona de trabajo se encuentra dividida en tres ventanas
horizontales. Las dos primeras son las que utilizaremos en adelante, mientras que la inferior, tiene
herramientas avanzadas que por el momento no utilizaremos, por lo que la minimizaremos,
colocando el puntero sobre su borde superior hasta que aparezca la flecha doble de cambiar el
tamaño, hacemos clic y arrastramos hasta que solo sean visibles las pestañas. También es posible
cerrarlas.
Cada vez que hagamos clic sobre uno de los elementos en la vista de diseño, en la vista del código
aparecerá la sección del código que corresponde al elemento seleccionado. La primera modificación
que haremos en nuestro diseño, será el encabezado. Al hacer clic sobre él, el código en la vista
superior mostrará la sección del mismo donde se encuentran los elementos que componen este
encabezado. Del mismo modo, cuando hacemos clic sobre una sección del código, la ventana de
diseño se moverá y se seleccionará la parte del diseño correspondiente.
Ahora modificaremos el Encabezado. Al hacer clic en la vista de diseño, aparecerá un cursor
parpadeante, indicando que podemos modificar el texto. Todas las modificaciones de texto, pueden
realizarse en ambas vistas y los resultados serán mostrados en ambas. Borramos el texto por defecto
y sustituimos por “Mi página”. Si mantenemos el cursor en la misma posición, aparecerá un ícono
con un timón. Al hacer clic sobre él, se abrirá una ventana en la cual aparecen todas las etiquetas
CSS que están relacionadas con el elemento seleccionado.
Al posar el puntero sobre cada una de estas etiquetas, aparecerán los atributos de la etiqueta y sus
valores. La siguiente captura de pantalla ilustra este punto.

Si hacemos clic sobre una de las etiquetas, la vista de código se cambiará a la del archivo CSS,
mostrando la etiqueta correspondiente. Ahora haremos una prueba de edición. Haremos clic sobre el
ícono de navegación de etiquetas. Al aparecer la ventana, haremos clic en la etiqueta body. En la
vista de código, aparece la etiqueta body del código CSS, que se muestra de la siguiente forma: