Académique Documents
Professionnel Documents
Culture Documents
¿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.
El 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).
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.
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 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
2
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM
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>
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>
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>
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>
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
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>
<body bgcolor=#nnnnnn>
La siguiente tabla nos muestra algunos colores con sus respectivos números en
hexadecimal:
4
PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM
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
* Atributo size
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>
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
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.
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>
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 >
Todo el texto comprendido entre los tags <u > y </u> será exhibido en el modo subrayado.
Sintaxis
<u>…texto…</u>
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
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>
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>
Todo el texto comprendido entre los tags <sub> y </sub> será exhibido en tamaño
subíndice con relación al texto a su alrededor.
Sintaxis
<sub>…texto…</sub>
Todo el texto comprendido entre los tags <sup> y </sup> será exhibido en tamaño
superíndice con relación al texto a su alrededor.
Sintaxis
<sup>…texto…</sup>
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