¿Cómo construir un sitio Web? - Colegio Bosque del Plata
¿ C ó m o co n s tr u i r u n s i t i o W e b?
1.
Estructura básica de una página web
Para ver el código HTML (la receta) de cualquier documento Web (de
este por ejemplo) basta con elegir en el navegador la opción "View" o
"Ver" y luego "Source" o "Código Fuente".
Todo documento HTML tiene dos partes infaltables:
1. Cabeza
Delimitado por las etiquetas <HEAD> ..... </HEAD>. Establecer el comienzo y fin de la cabecera del documento. En
la cabecera se puede guardar información acerca del documento como por ejemplo el titulo, palabras clave para uso de
buscadores y, en general, datos que no se consideran parte del contenido del documento pero aportan información
sobre el mismo. El más importante y obligatorio, es el título del documento (elemento TITLE).
<TITLE> ....</TITLE>. El navegador no lo presentara junto al contenido del documento, pero lo hará disponible al
usuario. Los navegadores actuales lo muestran en la barra superior de la ventana del browser y lo utilizan como
referencia cuando se agrega la pagina al listado de sitios favoritos.
Cuerpo
Marcado por las etiquetas <BODY> .... </BODY>. Todo lo que se encuentre entre estas etiquetas será lo que
el navegador mostrará en pantalla como contenido neto de la página. Puede incluir gran variedad de elementos,
cada uno con sus correspondientes atributos.
Tanto la cabeza como el cuerpo tienen que estar dentro de las etiquetas <HTML> lo primero que aparece en todo
documento y </HTML> la última que aparece en todo documento.
2. Cómo armar el envase de una página Web
Para crear archivos en formato HTML (léase páginas web) no es necesario invertir programas de diseño, basta con
disponer de un editor de texto plano. Todos los sistemas operativos incluyen algún editor de textos plano:
Windows NT/2000/XP/Vista/7 incluye el Notepad o bloc de notas, Unix incluye Vi y Ed.
Por otro lado, existen procesadores de texto avanzados (Microsoft Word, Open Office, etc)
que entre otras mejoras incluyen la opción de guardar los archivos en formato HTML. Dado que lo
único que está al alcance de todos los usuarios es un simple editor de textos vamos a utilizar esa
alternativa, ya que los resultados serán los mismos (o incluso mejor), que los que se obtienen
con un sofisticado procesador de textos.
Creación de un archivo HTML en el Bloc de notas de Windows
En Windows un archivo de texto plano se reconoce por su extensión ".txt" , las imágenes por las
Para que los
navegadores
reconozcan a un
archivo
HTML
como
tal,
su
extensión deberá
ser ".htm" o bien
".html".
extensiones ".jpg', ".gif", los documentos de Word ".doc", etc. Del mismo modo, para que los
navegadores reconozcan a un archivo HTML como tal, su extensión deberá ser ".htm" o bien ".html".
A continuación crearemos nuestro primer archivo ".htm" (o nuestra primera página web) en el Bloc de notas. Los pasos
a seguir son los siguientes:
1
1) Abrir el Bloc de notas (En windows: Inicio - Programas - Accesorios - Bloc de notas)
2) Sin ingresar ningún contenido, vamos a grabar el archivo en formato HTML. Para asignarle la extensión ".htm" de la
que hablamos antes (".html" tambien sirve), será necesario introducir el nombre del archivo con el siguiente formato:
"nombre.extension". En nuestro caso, el nombre sera "prueba.htm":
3. Cómo insertar contenido en la página
Agregar las primeras etiquetas necesarias para que el documento diga: Aprendiendo HTML
En este ejemplo existen etiquetas para distinguir la cabecera, el cuerpo, el titulo y los párrafos del documento.
1) Antes de pasar el texto, vamos a insertar el archivo HTML creador y a distinguir sus dos principales partes:
encabezado (HEAD) y cuerpo (BODY).
2) Identificaremos los párrafos que componen el texto delimitándolos con el par de etiquetas <P> .... < /P>. Éstas
sirven para delimitar el comienzo, la alineación y el fin de los parrafos (la "P" es por paragraph). Dentro del cuerpo del
documento insertaremos el texto delimitado (en esta parte vamos a definir todo lo que queramos que se vea en la
pantalla):
2
3) El último paso es grabar el archivo en formato ".htm" para que lo reconozca el navegador.
4) La pagina debe mostrarse asi en el navegador:
Visualización de archivos HTML
La visualización de las páginas es una tarea mucho mas sencilla que la de crearlas. De hecho, cualquier usuario de
Internet está familiarizado con el navegador con el cual vamos a mostrar el contenido de las páginas. Para ver nuestro
documento 'prueba.htm', bastará con abrir el navegador, seleccionar la opción Open del menú File, y elegir el archivo
que acabamos de crear.
4. Editores de HTML
Si analizamos los editores de HTML existentes en el mercado, veremos que son muchos, de manera que podremos
evaluar y ver la conveniencia de uso teniendo en cuenta que incluyen asistentes (para evitar escribir todos los tags),
estos asistentes son también llamados WYSIWYG (pronúnciese "guisigüig") y responde a la siglas de las palabras
"What you see" (lo que ves en el programa) "is what you get" (es lo que se obtiene en el
navegador).
A pesar del avance de estos programas, para construir un buen sitio, es necesario conocer
HTML por varios motivos:
•
Siempre es interesante saber que se está haciendo y, por sobre todas las cosas, ser
capaz de controlar el comportamiento de las páginas.
• Los navegadores quizá no puedan soportar por completo una determinada página creado
con un editor y, en cambio, si una creada con HTML "puro". (por ej si se genera el htmls
desde Word)
•
Si de verdad queremos saber cómo los usuarios visualizarán nuestros documentos y
Nuestra
recomendación
es
que, si usan un editor,
utilicen
uno
que
permita un fácil acceso
y edición del código
HTML.
cómo debemos de crearlos para no quedar atados a un navegador en concreto, hemos de conocer HTML.
Otra pregunta fundamental que puede surgir es si deben utilizarse estas herramientas o si se debe trabajar con un
simple editor de textos. Para esta pregunta existen respuestas para todos los gustos. Cualquiera que haya trabajado
con un editor HTML, habrá comprobado cómo puede ahorrarle buena parte del trabajo más pesado. También,
probablemente, haya tenido que hacer modificaciones en el código fuente. La recomendación es que, utilizar un
editor que permita un fácil acceso y edición del código HTML.
Existen muchos y excelentes programas comerciales de este tipo, pero se puede utilizar alguno de los muchos
programas shareware o freeware que se ofrecen por Internet. Lo más recomendable para aprender el lenguaje HTML es
el uso de editores que permiten trabajar con el código. A continuación, se presenta una tabla con varios programas de
edición:
Programa
Descripción
Editor de páginas web WYSIWYG Multiplataforma basado en Mozilla Composer, pero de ejecución
NVU
independiente.
Este editor facilita el desarrollo de páginas web, gracias a las diferentes visualizaciones
3
disponibles en su interfaz (código fuente, ventana WYSIWYG, visión con tags de HTML realzados),
entre los cuales es posible cambiar mediante un sistema de pestañas.
Es una aplicación en forma de estudio (basada en la forma de Adobe Flash) enfocada a la
construcción y edición de sitios y aplicaciones Web, basados en estándares. Es el programa de
este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su
Dreamweaver
integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los
estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression
Web y tiene soporte tanto para edición de imágenes como para animación a través de su
integración con otras. Se vende como parte de la suite Adobe Creative Suite 3-5.
Es muy difundido entre los editores. Permite ver el código fuente de las páginas, admite
Microsoft
FrontPage
previsualización de tablas, formularios, marcos y mapas, y prueba de páginas mediante Netscape
o Explorer. Incluye asistente y tutoriales; y permite abrir y modificar documentos remotos.
4
© Copyright 2024