Ing.

Miryan Almache

2009
SINED 2
INTRODUCCIÓN

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje

predominante para la construcción de páginas web.

Las páginas web son documentos que pueden ser visualizadas en cualquier ordenador sin importar el
sistema operativo (Windows, Macintosh, Linux, etc.). La característica antes expuesta se consigue utilizando
un lenguaje estándar compatible con todos estos sistemas.

Este documento pretende ser una introducción al lenguaje HTML e incorporará fundamentos de DHTML,
por lo tanto es hora de empezar con ciertas definiciones.

El World Wide Web (WWW) es un sistema de información global que permite relacionar mediante hipertexto
distintas fuentes de información. Pero esta información debe estar ordenada de alguna forma de manera
que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son
las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones e incluso sonido
y video.

La Web proporciona un medio sencillo de publicar información de forma electrónica que estará accesible
para todas las personas del mundo conectadas a través de Internet.

El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir,
documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros
documentos o a otras fuentes de información que pueden estar en la propia máquina o en máquinas
remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y
sonidos seamos capaces de imaginar.

SOFTWARE APLICADO I
SINED 3

HTML es independiente del medio donde va a ser presentada la información, definiéndose que tipo de
información se requiere presentar y será la misión del navegador el encargado de dar un formato apropiado
al documento.

Un documento HTML consta de texto que define el contenido del documento y de una serie de etiquetas,
que son las instrucciones del lenguaje, que definen la forma en que debe presentarse esta información. Con
las etiquetas se puede definir la estructura lógica del documento, los estilos a aplicar al texto, los
hiperenlaces para acceder a otros documentos o fuentes de información y la inclusión de imágenes y
archivos multimedia.

Las etiquetas se presentan entre paréntesis angulares (< y >); regularmente cada <etiqueta> va
acompañada de su correspondiente antietiqueta </etiqueta>. Las etiquetas contienen atributos: <etiqueta
atributo='valor' > que pueden tener diferentes valores; cada etiqueta tiene sus atributos característicos, que
controlan diferentes aspectos de la presentación del contenido de la etiqueta. Las antietiquetas nunca tienen
atributos.

Cabe destacar, que para crear un documento HTML, solamente hace falta un programa editor de texto, que
permita generar un archivo plano, es decir sin, ningún formato especial.

Con el lenguaje HTML no podremos usar:

Columnas. Texto por columnas de estilo periodístico, aunque con tablas se puede emular de una
forma limitada.
Tamaño de las fuentes. No se puede especificar los tamaños de fuente normales en los editores,
solo se permite de 1 a 7 siendo 1 el menor tamaño.

SOFTWARE APLICADO I
SINED 4
Efectos. Los efectos poco normales de texto como relieve, sombreado o grabado, se pueden
conseguir usando una imagen que represente el texto a incluir.
Tabulaciones. No se permite el uso de tabulaciones, ni tampoco el sangrado de forma normal,
pudiendo emularse con las instrucciones de lista.
Ecuaciones. Para incluir ecuaciones, debemos incluir una imagen en la que se encuentre la
ecuación a representar.
Encabezados, pie de página, notas al pie de página, notas al final.
Bordes de página, márgenes, numeración de páginas.

Existen diferentes tipos de software que permiten diseñar páginas web que no requieren aprender las
etiquetas del lenguaje HTML, es decir, el trabajo se lo realiza a través de herramientas visuales; a pesar de
esto es indispensable conocer que este tipo de diseño presenta inconvenientes, ya que el programa crea
páginas que no funcionarían correctamente en los diferentes navegadores por la constante evolución de
lenguaje.

SOFTWARE APLICADO I
SINED 5

SOFTWARE APLICADO I
SINED 6

SOFTWARE APLICADO I
SINED 7

1. Conceptos básicos

En el diseño de las páginas web el elemento clave es el "browser", "navegador", "visualizador" o "cliente",
todas las codificaciones de efectos en el texto que forman el lenguaje HTML no son más que instrucciones
para el visualizador. Partiendo de esto, se entiende el porqué no se ve lo mismo con todos los
visualizadores ya que depende de como estén diseñados y para qué versión de lenguaje se fueron
creados.

Actualmente existen multitud de navegadores, los más conocidos son el Explorer de Microsoft, Navigator de
Netscape, Mozilla FireFox.

Antes de crear páginas Web, se deben considerar algunos conceptos acerca de Internet.

HTML

La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto
normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y
dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como
Internet Explorer, Mosaic, o Netscape).

SOFTWARE APLICADO I
SINED 8

URL

URL (Uniform Resource Locutor) es un localizador de recurso uniforme, usualmente usted lo identifica de la
siguiente forma: http//www.yahooo.com

En general empieza con http y termina con .com, .org, .edu, o .net. Una parte de u URL es el nombre de
dominio, que ayuda a identificar y localizar computadoras en Internet. Para evitar confusiones, cada
nombre de dominio es único.

Detrás de ese atajo hay una serie de números, llamada dirección IP, que corresponde a la dirección
específica del lugar donde está localizado el sitio que está buscando en Internet.

Registrar el dominio es similar a arrendar una oficina en Internet. Una vez registrado el dominio, tiene
derecho a publicar un sitio Web bajo ese nombre en Internet.

HTTP

HTTP es el protocolo de la Web (WWW), usado en cada transacción. Las letras significan Hyper Text
Transfer Protocol, es decir, protocolo de transferencia de hipertexto. El hipertexto es el contenido de las
páginas web, y el protocolo de transferencia es el sistema mediante el cual se envían las peticiones de
acceder a una página web, y la respuesta de esa web, remitiendo la información que se verá en pantalla.
También sirve el protocolo para enviar información adicional en ambos sentidos.

SOFTWARE APLICADO I
SINED 9

SERVIDORES WEB

Un servidor Web es una computadora que funciona con un software especial que siempre está conectada a
Internet.

NAVEGADORES

Los navegadores web o browsers son las aplicaciones encargadas de realizar las peticiones de páginas
web y otros recursos al servidor especificado y de presentar luego los resultados de la petición al usuario

Las páginas web recibidas son documentos de texto plano codificado mediante el lenguaje HTML, siendo
responsable el navegador cliente de la interpretación de dichos códigos y de la presentación adecuada del
documento al usuario.

EDITORES

En cuanto a los editores, básicamente los hay de dos tipos: HTML y WYSIWYG. Con los primeros editamos
el código de la página y para ver el resultado tenemos que abrirla con un navegador. Los segundos nos
permiten editarla tal y como se verá en el navegador (wysiwyg significa "lo que ves es lo que obtendrás")

SOFTWARE APLICADO I
SINED 10
Editores HTML

Se manejan como un procesador de texto, pero lo que vamos escribiendo es el código html de la página,
por lo que debemos conocer bastante a fondo los fundamentos de dicho lenguaje.

Editores WYSIWYG

La aparición de estos editores ha permitido que todo el mundo pueda crear una página web ya que no
requiere un aprendizaje previo de html ni de lenguajes de programación. Con ellos se ve constantemente la
página con el formato con el que se verá a través del navegador, al menos en teoría.

El diseño es mucho más fácil y entretenido porque se va viendo sobre la marcha cómo queda la página.
Esto es especialmente útil cuando no se tiene la idea clara de antemano de lo que se quiere hacer.
Además, al incluir plantillas prediseñadas, se puede ahorrar mucho tiempo y conseguir una página web lista
en pocos minutos.

SOFTWARE APLICADO I
SINED 11
2. Programas para crear páginas web

Las páginas web son documentos escritos con caracteres ASCII por tanto pueden editarse y crearse desde
cualquier editor de textos. Por lo tanto se puede crear páginas web con el Bloc de notas de Windows.

Si utiliza el Bloc de notas o cualquier otro editor de textos sencillo al momento de guardar las páginas en la
extensión del archivo, por defecto el Bloc de notas asigna la extensión .TXT a los archivos creados, si no
cambiamos esto no funcionarán las páginas. Al guardar se debe escribir el nombre del archivo seguido de
.htm o .html. A continuación comprobaremos el resultado en el Explorador de Windows.
Existen editores de texto que reconocen el formato de las páginas web y presentan con colores distintos las
etiquetas y el resto de elementos del código facilitando el trabajo. Un buen editor es Ultraedit disponible en
Internet en http://www.ultraedit.com

Algo más prácticos son los editores de html que automatizan la inserción de etiquetas con botones. Un buen
programa de este tipo es el FlexEd, también disponible en Internet en http://www.flexed.com. Este programa
trabaja directamente en código, e incorpora la opción de visualizar el resultado dentro del mismo programa,
aunque siempre es mejor visualizarlo en el Explorador de Windows.

Otro buen programa del tipo del anterior, aunque mucho más elaborado, es el Homesite, también disponible
en Internet en http://www.allaire.com. Este ya permite la inserción de los últimos elementos como applets de
Java, Javascript y dhtml, y permite escribir el código directamente o que lo cree el propio programa. Esta
característica introduce el otro tipo de programas de edición de páginas web, en los que creamos la página
como si de un documento de un procesador de textos se tratara y el programa se encarga de generar el
código.

SOFTWARE APLICADO I
SINED 12
Uno de los mejores y más completos programas de este tipo es el Dreamweaver de Macromedia, del que
puede descargarse una versión de prueba en http://www.macromedia.com.

Otros editores a señalar son:

PageMill de Adobe

Front Page de Microsoft, incluido en el Windows 98 en versión reducida

Netscape Composser de Netscape, incluido en el navegador

Aunque procesadores de texto como el Microsoft Word permitan crear páginas web, no es en absoluto
recomendable por la enorme cantidad de código inútil que generan que llega a cuadruplicar el tamaño de
los archivos.

Antes de empezar a crear páginas web es recomendable aprender el código y crear algunas páginas con
editores sencillos, con esto se podrá entender que estamos haciendo, y sabremos interpretar y añadir a
nuestras páginas diseños y efectos que veamos en otras webs.

SOFTWARE APLICADO I
SINED 13

3. PLANIFICACIÓN PARA EL DESARROLLO DE UN SITIO WEB

La creación de la(s) página(s) en el Web requiere previamente una planificación cuidadosa del proyecto.
Este proceso consiste en definir la audiencia, los propósitos del trabajo, sus objetivos, y políticas para el
desarrollo y uso de su información. Antes de comenzar a escribir una página WWW, es importante analizar
las metas que se esperan alcanzar, las características, actitudes, y preferencias de la audiencia y el
contenido.

Reflexione sobre lo siguiente: ¿Dónde desea que la presentación del Web se vea?, ¿hay gente en el Web
que quiere vera?, ¿Quiénes son?, ¿Qué quieren ver? ¿A quien quieren ver?.

Diferentes páginas sirven para diferentes propósitos, por lo tanto es importante preguntarse, porque se está
colocando una presentación en el Web en primer lugar, y para quien.

Algunas razones para tener páginas en el Web son:

Una institución educativa que desee informar los servicios que presta
Entrenar/adiestrar o capacitar a los empleados de una compañía en cuanto a ciertas
destrezas/conocimientos que deben poseer.
Promoción/mercadeo de productos comerciales o servicios
Simplemente divulgar información personal a los amigos o familiares
Publicación de una revista electrónica.

En resumen, tenemos que la planificación del proyecto para la construcción de las páginas WWW involucra
lo siguiente:

SOFTWARE APLICADO I
SINED 14

El establecimiento de metas generales alcanzables para el Web.

Definir la audiencia que navegarán las páginas WWW a ser creadas.
Establecer el propósito y objetivo.
Recopilar y mantener la información pertinente que apoyará el Web.

El proceso de planificar las páginas WWW se puede desglosar en siete etapas fundamentales , (véase Tabla 1):

ETAPA DESCRIPCIÓN
Proceso de recoger información para determinar las metas y expectativas. Esta fase puede
incluir técnicas específicas de investigación, tales como el análisis/estudio de necesidades,
Análisis
análisis de trabajo, y análisis de tareas. Se definen los objetivos del proyecto, esto incluye
identificar la audiencia y el tipo de aplicación/editor HTML.
Proceso mediante el cual se elabora la estructura visual y organización de las páginas del
Diseño Web, incluye su interfaz/navegación, imágenes, elementos multimedios, contenido/texto, entre
otros.
Proceso administrativo que organiza y selecciona los recursos requeridos para el desarrollo y
Logística
publicación de las páginas WWW.
Producción La fase de producción incluye una lista de tareas a ser instruidas.
Ofrecer la dirección de Internet a los estudiantes o personas interesadas vía correo electrónico
Promoción
(e-mail) o material impreso.
Pruebas del funcionamiento de las páginas antes de ser publicadas en un servidor WWW.
Evaluación/ Validación
Incluye también la evaluación por la audiencia luego de haber implantado las páginas.
Mantenimiento e Actualizar las páginas WWW en el servidor y traer nuevas ideas originales para el
Innovación mejoramiento de su diseño.
Tabla 1

SOFTWARE APLICADO I
SINED 15
4. Consejos a tener en cuenta

Hay una serie de importantes factores que debemos tener en cuenta a la hora de crear páginas web.

4.1 Organización

Antes de crear la página es importante tener clara su estructura. Está estudiado que la mayoría de
navegantes buscan rapidez y simplicidad en las páginas que visitan. Si el visitante de nuestra página ve que
esta no tiene una estructura clara, que la navegación entre las distintas páginas no es sencilla, o que hay
demasiados recursos inútiles que hacen muy lenta la navegación, se irá a buscar otro sitio. Estos son
algunos consejos para conseguirlo:

Una página principal que sirva de enlace al resto de páginas

Algunos sitios tienen una página de presentación antes de entrar en la página principal. Hay que
llevar cuidado con este tipo de páginas porque pueden cansar al visitante.

Sólo los recursos necesarios y optimizando el espacio que ocupan. Si nuestras imágenes son
demasiado grandes, con demasiada resolución, la carga de la página se hace muy lenta y puede
cansar al visitante. Si es necesario introducir imágenes de alta resolución se hará utilizando
miniaturas de las imágenes con un vínculo a la imagen real.

SOFTWARE APLICADO I
SINED 16
No abusar de los "efectos especiales". Algún efecto en nuestra página utilizando applets de Java o
Javascript puede hacer más atractiva nuestra página, pero abusar de ellos puede resultar
abrumador y desviar la atención de lo que queremos mostrar, además de aumentar el tiempo de
carga.

Cuidar la estructura de los archivos y carpetas

La estructura de las carpetas y archivos de nuestro sitio web debe estar bien estructurada, sobretodo para
facilitarnos las actualizaciones posteriores. Estos son algunos aspectos a tener en cuenta:

La primera página que se carga al entrar en nuestro web siempre debe llamarse index.htm o
index.html, en caso contrario deberemos añadir el nombre del archivo a la dirección de nuestra web
complicándola innecesariamente.

Un nombre de archivo en mayúsculas o minúsculas será interpretado como el mismo archivo en

nuestro ordenador pero no al navegar en Internet. Es recomendable utilizar siempre minúsculas,
tanto en el nombre del archivo como en la extensión. Si fuese necesario utilizar mayúsculas nos
fijaremos que los vínculos a estos archivos estén escritos exactamente igual.

En los nombres de archivo evitaremos utilizar vocales acentuadas, eñes, y caracteres como
interrogantes, exclamaciones, etc. Estos caracteres dan a menudo problemas y no basta con
comprobar que funciona en nuestro disco duro, pues los problemas se dan una vez que las páginas
están en Internet.

SOFTWARE APLICADO I
SINED 17
Los espacios en los nombres de archivos también dan a menudo problemas. Una opción es
reemplazarlos por el guión de subrayado, por ejemplo mi_pagina.html.

Es aconsejable organizar los archivos de manera que los archivos .html estén juntos en el directorio
raíz y los recursos (imágenes, sonidos, etc.) en una subcarpeta. Si tenemos una "subpágina"
independiente del resto, también es recomendable separarla en otra subcarpeta. No obstante
tampoco es bueno complicar mucho la estructura del sitio con demasiadas carpetas. La imagen
siguiente muestra un ejemplo de una estructura simple para una página web.

SOFTWARE APLICADO I