PROGRAMACION WEB 2008

FUNDACIÓN RED MILENIUM

¿Qué son las páginas Web?

Internet es considerada hoy la principal forma de comunicación entre computadoras de

diferentes tamaños y modelos que se encuentran diseminadas por todo el mundo. Lo que
realmente convirtió a Internet en algo atrayente es la posibilidad de permitir que las
personas naveguen por la red por medio de páginas Web que contienen textos, sonidos,
imágenes, animaciones y otras elementos de multimedia, siendo cada una de esas páginas
una presentación multimedia interactiva.

¿Qué es un Sitio?

Un sitio es nada más que un conjunto de páginas que pertenecen a un mismo grupo de
información, o sea, a una misma dirección de Internet. Ese conjunto podrá ser unitario (de
apenas una página) o poseer decenas y hasta cientos de páginas. Las páginas que componen
un sitio son escritas por medio de lenguajes creados especialmente para este fin.

Uno de los más conocidos y utilizados es el lenguaje denominado HTML (Hyper Text
Markup Language – lenguaje de elaboración de documentos con hipertextos). HTML no es
un lenguaje de programación, pero si un lenguaje de marcación, cuya función es enviar
comandos de formateo (marcas) que informan al navegador instalado en el cliente (Internet
Explorer, Netscape, etc.) de que manera el textos, las imágenes, etc., deberán ser exhibidos
en la pantalla.

El lenguaje HTML está compuesto por una serie de comandos (marcas) denominado tags
(etiquetas).

Con el correr del tiempo los sitios se están convirtiendo cada vez más sofisticados, y los
programadores de HTML comenzaron a percibir la necesidad de incluir programas en las
páginas HTML. Para solucionar este problema fueron implantadas nuevas tecnologías
como la incorporación de scripts (pequeños programas insertados en las páginas escritas en
lenguaje HTML) o de recursos más sofisticados como ASP (Active Server Pages),
JavaScript, etc.

¿Qué es una Home Page?

El término Home Page es utilizado para denominar a la primera página o la principal de un

sitio, cuya función es diferenciarla de las demás que la componen. Entonces, una Home
Page es como si fuese la tapa de una revista. En Internet, actúa como introducción del sitio
con las explicaciones de su propuesta y las formas de conectarse con las otras páginas del
sitio. Podemos decir que una Home Page es el índice del sitio que se visita.

El Diseño

Peso del Diseño

Cada día que pasa nos encontramos con páginas más sofisticadas que emplean tecnología
de punta, imágenes en movimiento, sonidos, etc. Que se convierten en una tentación para
atraer nuevos visitantes.
Una página muy pesada (muchas fotos de alta calidad, sonidos, botones estilizados),
pueden llevar minutos para ser cargadas y fatalmente ahuyentará al visitante. Por otro lado,
una página simple, sin imágenes con botones mal terminados, logotipos borrosos, etc, es
bajada rápidamente pero difícilmente hará que un visitante vuelva a ella.

Entonces, se torna indispensable que armemos un proyecto con el peso ideal (ni tanto ni tan
poco).

Navegación del Sitio

Es una de las más importantes fases del proyecto, pues establecerá las páginas que
conformarán el sitio y sus relaciones entre sí. Un buen sistema de navegación debe ser claro
y eficiente, permitiendo al visitante obtener las informaciones deseadas sin que se pierda en

1
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM

un gran laberinto. Debe ser tan fácil ir de una página a la otra como volver al punto
deseado. De un modo general, cuanto mejor es el proyecto mejor será el cuidado tomado
para la navegación.

Organización de una Web

Para hacer una buena presentación Web lo ideal es crear un boceto inicial de la
estructura. Si hacemos esto, no solo estamos procurando una presentación agradable y
facilitando la tarea de navegar sino que también nos facilitamos el mantenimiento de
futuras revisiones y modificaciones.

Objetivos

Lo primero que debemos hacer es fijarnos los objetivos que queremos alcanzar según
la información que vayamos a aportar. Para crear nuestra primera página, estos objetivos
deberían no ser muy pretenciosos o tener un sentido únicamente personal. Tener claros los
objetivos nos ayudará a no plasmar contenidos confusos o innecesarios.

Contenidos

Una vez que tenemos los objetivos, hay que organizar el contenido por temas o
secciones, que se ajusten a nuestros objetivos, reuniendo las informaciones relacionadas
bajo el mismo epígrafe. Es conveniente que los temas sean razonablemente cortos y si fuera
necesario dividirla en subtemas. Si por el contrario tenemos temas muy cortos, lo correcto
sería agruparlos bajo un encabezado de un tema algo más general.

¿Qué es HTML?

HTML (Hyper Text Markup Language) es un lenguaje de elaboración (marcación) de

documentos con hipertextos, que funciona como si fuesen señales de tránsito para una
página de la Web, cuya función es enviarle al navegador instalado en el cliente (Internet
Explorer, Netscape, etc.) comandos de formateo (marcas) que informan al navegador como
los textos, las imágenes, etc. Deberán ser exhibidos en la pantalla. Además de estas
marcaciones, HTML contiene comandos que permiten enlaces desde una página hacia otra.

HTML está compuesto por un conjunto de normas e instrucciones que informan al browser
de que manera él debe exhibir la página en la pantalla de su computadora. Estas
instrucciones llamadas etiquetas (tags) están insertadas en los documentos originales que
crearán las páginas (documento fuente).

Para escribir en HTML, deberá utilizar cualquier editor de texto, con tal que el texto sea
guardado en el formato “sólo texto” y con la extensión htm o html. También podrá usar
editores de HTML especialmente desarrollados para este fin, lo cual facilita bastante el
trabajo del programador.

Características de HTML

 Es un lenguaje de marcación y no de programación.

 Sus comandos reciben el nombre de tags.
 La mayoría de los tags aparecen en parejas; una iniciando un determinado bloque y
la otra cerrando ese bloque. Ejemplo: <head> y </head>
 Los tags están siempre encerrados entre los signos menor que y mayor que <…>
 Los tags pueden ser escritos tanto con letras minúsculas como mayúsculas o una
combinación de ambas. Ejemplo: <Head>,<head>,<HEAD>,<hEaD>, etc.
 Algunos tags poseen otros comandos asociados que son denominados atributos,
cuya finalidad es expandir su alcnace.

2
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM

Estructura Básica de HTML

Todo documento escrito en HTML posee cuatro tags básicos usados para describir la
escritura general de una página a ser leída por el navegador, como ser título, tipo de
lenguaje adoptado, herramientas disponibles, etc. Entonces, un documento escrito en
HTML deberá tener como mínimo, la siguiente estructura:

<html>
<head>
<title>Bienvenido</title>
</head>

<body>
… contenido de la página
</body>
</html>

* Los tags <html> … </html>

Estos tags tienen por función indicar al browser que el documento a ser leído está escrito en
lenguaje HTML, lo cual los conviene en los más importantes tags de una página. Deben
obligatoriamente abrir y cerrar una página, o sea todo su contenido deberá estar encerrado
por estos tags.

Sintaxis

<html>
… página a ser exhibida
</html>

* Los tags <head> … </head>

Indican cuales son los comandos que deberán ser leídos por el navegador antes que una
página sea cargada, es decir sirve de cabezal para una página, como ser título a ser
insertado en la ventana del navegador, método para la apertura de una página, los lenguajes
incorporados, etc. En la jerarquía del lenguaje HTML, el tag <head> viene después de tag
<html>.

Sintaxis

<head>
… cabezal
</headl>

* Los tags <title> … </title>

Definen un título a ser exhibido en la barra de título de la ventana del navegador (Windows
Explorer, Netscape). Estos tags siempre estarán contenidos en el tag <head>

Sintaxis

<title>
… contenido de la página
</title>

* Los tags <body> … </body>

Contienen todo el resto de una página escrita en HTML. Inician y finalizan una página a ser
exhibida por el navegador, o sea contienen todo el cuerpo del documento. Jerárquicamente
el tag <body> viene inmediatamente después del tag <head> y es un tag de inicialización y

3
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM

el de finalización </body> viene inmediatamente antes del tag </html>. Un tag </body>
también puede contener algunos atributos para definir un color de fondo para una página,
márgenes, etc.

Sintaxis

<body>
…contenido de la página
</body>

Insertando Comentarios

Los comentarios son textos que no son interpretados por el navegador y en consecuencia,
no son exhibidos en la pantalla de quien está visitando su página. Su función es meramente
explicativa, permitiendo al programador insertar comentarios para su propia orientación en
el futuro. Está representado por el siguiente tag:

<!-…comentario…->

Sintaxis

<!- …texto del comentario…->

Definir un Color de Fondo para la Página

HTML posee atributos cuya función es expandir la apariencia de los tags, dándole mayor
poder de acción. Uno de estos atributos es el bicolor (back growding color) que tiene por
objetivo aplicar un color de fondo en una determinada sección. Así, para definir un color de
fondo, en una página entera, debemos insertar ese atributo en el tag <body>, pues, como ya
sabe es el responsable de delimitar todo el contenido de un documento:

Sintaxis

bgcolor=#nnnnnn>

Donde nnnnn es un número hexadecimal correspondiente al color deseado

Insertando este atributo en el tag <body> tenemos:

<body bgcolor=#nnnnnn>

La siguiente tabla nos muestra algunos colores con sus respectivos números en
hexadecimal:

Color Hexadecimal Nombre

#FFFFFF Blanco
#000000 Negro
#0000FF Azul
#008000 Verde
#800000 Marrón
#808080 Gris
#FF0000 Rojo
#FFFF00 Amarillo

4
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM

Trabajando con Textos

Para especificar el tipo de una fuente, su tamaño, su color, se utiliza el tag de inicio <font>
que debe ser insertado antes de formatear el textos, el tag de cierre </font> será insertado
después del tramo a ser formateado:

El tag <font>

Este tag es usado para definir qué fuente del navegador se usará para exhibir los textos.
Deberá contener un tag de inicio <font> seguido de sus atributos (size, color y face), más el
tramo que contiene el texto a ser exhibido y un tag de cierre </font> usado después de ese
tramo:

Sintaxis

<font> [size=”n”] [color=”#nnnnn”]

[face=”nombre de la fuente”]> …texto… </font>

* Atributo size

Define un tamaño para una fuente, siendo n un número comprendido entre 1 y 7:

Sintaxis

<font size=”6”>…texto…</font>

* Atributo color

El atributo color define un color de texto que está delimitado por el tag <font>. Su sintaxis
admite dos formas. La primera, utilizando un número hexadecimal que corresponde al color
deseado, y la segunda usando el nombre de color en inglés.

Sintaxis

<font color=”#00000”>…texto…</font>
<font color=”negro”>…texto…</font>

* Atributo face

Define el tipo de fuente a ser usada por el navegador para el tramo comprendido por los
tags <font> y </font>. Para que este atributo funcione correctamente, el nombre de la
fuente usada en el proyecto deberá estar instalado en la computadora del usuario que está
viendo la página. En consecuencia, aconsejamos que use fuente comunes, como arial,
Times, New Roman, etc.

Sintaxis

<font face=”Arial”>…texto…</font>

Insertando Cortes de Línea

Un corte de línea, en el lenguaje HTML, es representado por el tag <br> que tiene por
función insertar un corte de línea en el punto donde fue incluido. Al encontrar el tag <br>,
el navegador pasa inmediatamente para el margen izquierdo de la línea siguiente y continúa
la impresión del texto.

Sintaxis

5
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM

<br><font>…texto…</font><br>

Insertando Párrafos

Un párrafo es representado, en lenguaje HTML, por el tag de inicio de párrafo <p> y por el
tag de fin de párrafo </p>. En consecuencia, todo el texto tipeado entre los tags <p> y </p>
será iniciado en un nuevo párrafo. Ese tag también puede contener el atributo ALIGN cuya
finalidad es provocar la alineación del textos de ese párrafo.

Sintaxis

<p>…texto del Párrafo…</p>

<p align=”center”>…Este texto está centrado…</p>
<p align=”leftr”>…Este texto está alineado a la izquierda…</p>
<p align=”right”>…Este texto está alineado a la derecha…</p>

Estilos de Texto

Los tags de estilo son usados para modificar el estilo de presentación de un textos o una
parte de éste, atribuyéndole negrita, itálica, subrayado, tachado, etc. Esos tags aparecen en
pares, siendo uno de inicio y el otro de cierre.

* Los Tags <strong> o <b>

Todo el texto comprendido entre los tags <strong > y </strong> será exhibido en negrita. El
mismo resultado también podrá ser logrado por medio de los tags <b>y </b>.

Sintaxis

<strong>…texto…</strong>
<b>…texto…</b>

* Los Tags <em> o <i>

Todo el texto comprendido entre los tags <em > y </em> será exhibido en itálica. El mismo
resultado también podrá ser logrado por medio de los tags <i>y </i>.

Sintaxis

<em>…texto…</em>
<i>…texto…</i >

* Los Tags <u>

Todo el texto comprendido entre los tags <u > y </u> será exhibido en el modo subrayado.

Sintaxis

<u>…texto…</u>

* Los Tags <strike> o <s>

Todo el texto comprendido entre los tags <strike > y </strike> será exhibido en el modo
tachado. El mismo resultado también podrá ser logrado por medio de los tags <s>y </s>.

Sintaxis

<strike>…texto…</strike>
<s>…texto…</s >

6
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM

* Los Tags <big>

Todo el texto comprendido entre los tags <big > y </big> será exhibido en tamaño mayor al
del texto a su alrededor.

Sintaxis

<big>…texto…</big>

* Los Tags <small>

Todo el texto comprendido entre los tags <small > y </small> será exhibido en tamaño
menor al del texto a su alrededor.

Sintaxis

<small>…texto…</small>

* Los Tags <sub>

Todo el texto comprendido entre los tags _y será exhibido en tamaño
subíndice con relación al texto a su alrededor.

Sintaxis

_…texto…

* Los Tags <sup>

Todo el texto comprendido entre los tags ^y será exhibido en tamaño
superíndice con relación al texto a su alrededor.

Sintaxis

^…texto…

* Los Tags <tt>

Todo el texto comprendido entre los tags <tt > y </tt> será exhibido en formato de máquina
de escribir con espacio fijo.

Sintaxis

<tt>…texto…</tt>

7
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM