Programación HTML I

SEMANA 3
Página web

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 3
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 3
ÍNDICE

PÁGINA WEB ....................................................................................................................................... 4

OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. PÁGINA WEB ............................................................................................................................... 5
1.1. CARACTERÍSTICAS................................................................................................................ 5
1.2. DISEÑO DE SITIOS ................................................................................................................ 5
1.3. ORGANIZACIÓN DE LOS ARCHIVOS ..................................................................................... 7
1.4. CREACIÓN DE UNA PÁGINA WEB NUEVA ......................................................................... 11
1.5. TÍTULOS ............................................................................................................................. 13
1.6. PÁRRAFO ........................................................................................................................... 13
1.7. GUARDAR UNA PÁGINA WEB ............................................................................................ 15
1.8. VISUALIZAR LA PÁGINA EN UN NAVEGADOR .................................................................... 16
COMENTARIO FINAL.......................................................................................................................... 18
REFERENCIAS........................................................................................................................................ 19

3
ESTE DOCUMENTO CONTIENE LA SEMANA 3
PÁGINA WEB

OBJETIVOS ESPECÍFICOS
 Comprender las características y organización de una página web.
 Elaborar una nueva página web para un sitio web que contenga títulos y párrafos.
 Comprender el proceso para guardar una página visualizándola en un navegador.

INTRODUCCIÓN
Las páginas web, como se ha revisado, tienen una estructura definida, así también cuando estas se
agrupan para formar un sitio existe una estructura recomendable para su organización en la
conformación de este.

A continuación se revisará el manejo de títulos y párrafos, componentes importantes en la

estructura del texto en la página.

También se revisará el proceso de publicación de la página en la internet y lo que conlleva a nivel

de red el proceso de arquitectura de un sistema web, como un proceso cliente-servidor.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 1. PÁGINA WEB

Una página web es un documento creado en lenguaje HTML que es parte de un grupo de
documentos hipertexto o recursos disponibles en el World Wide Web. Una serie de páginas web
componen lo que se llama un sitio web. Para conformar este sitio, dichas páginas deben
organizarse en una estructura de directorios (carpetas) dentro del disco de un servidor web.

1.1. CARACTERÍSTICAS

Como se ha visto, una página web tiene una estrucutra básica de elementos, cabecera (head) y
cuerpo (body), dentro de estos elementos básicos encontraremos hipermedias que son enlaces
hacia datos multimediales como imágenes, sonido, video y otros. Estos datos multimediales son
contenidos en archivos que serán parte igualmente del sitio. También esta página enlazará con
archivos de procedimientos escritos en lenguajes para la web con el fin de añadirles ciertas
funcionalidades. Otros archivos que estarán presentes en el sito serán, por ejemplo, archivos de
hojas de estilos, los cuales sirven para formatear los elementos de una página web.

Fuente: material preparado para la asignatura.

1.2. DISEÑO DE SITIOS

Para diseñar o definir un sitio se debe considerar que este:

 Debe ser creado en el disco duro de un servidor web. Estos servidores almacenan la
información del sitio y sus páginas web y a través del HTTP (servicio de WWW que trabaja

5
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 sobre protocolo TCP/IP) lo entregan a petición de los clientes (navegadores web) en
formato HTML.

Fuente: imagen extraída desde: http://netrunning.blogspot.com/2013/09/introduccion-la-arquitectura-cliente.html

 Estos servidores pueden ser montados sobre sistemas operativos como Linux o Windows,
los clientes (navegadores) realizan las peticiones de servicio HTTP a través del puerto de la
IP de servidor predefinido para este servicio, generalmente el puerto 80. Como se vio en
las semanas anteriores, en la instalación del servidor web “Apache”, que es parte de
XAMPP, a veces es necesario redefinir este puerto a otro, al 88 por ejemplo, por
encontrarse ocupado por otro servicio. Esto generalmente sucede cuando se levantan dos
servidores web (o HTTP) en el mismo computador.
 Cuando un navegador (Internet Explorer, Mozilla, Chrome, etc.) o cliente recibe la página
web a través del servicio HTTP, este la interpreta según el HTML que compone esta
página, y la presenta según esta interpretación en su ventana.

Fuente: material preparado para la asignatura.

 Para el usuario del navegador, el funcionamiento de este servicio a nivel de protocolo

tcp/ip (direcciones IP y puertos) es ocultado mediante el uso de direcciones URL y
nombres de dominio.

6
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 Fuente: http://es.slideshare.net/ajoffre/dominios-y-url

1.3. ORGANIZACIÓN DE LOS ARCHIVOS

Considerando que las páginas web y otros recursos que componen el sitio son archivos que deben
ser guardados en una estructura de directorio o carpetas, a continuación se revisará la forma
óptima y recomendada de organizar todos estos archivos y carpetas. El proceso de organizar los
contenidos del sitio en directorios y páginas se denomina “mapear”.

Para comenzar el mapeo se debe tomar en cuenta que en todo sitio existe una página web inicial,
que permite levantar todo el sitio. Esta página generalmente se llama: index.html o index.htm y
también podríamos encontrarla como default.html, etc.

Fuente: material preparado para la asignatura.

La estructura de archivos comienza desde la carpeta raíz (root u home):

7
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 Fuente: material preparado para la asignatura.

Como se puede observar en la imagen anterior, a contar de la carpeta raíz se ramifican las demás
carpetas del sitio. El archivo de la página index.html se encuentra en esta carpeta.

Para la creación de las demás carpetas y su organización es importante conocer claramente los
contenidos presentes en el sitio. Por ejemplo, si observa la imagen anterior se verá que la carpeta
“tienda”, que depende directamente de la raíz, incluye dentro de ella las páginas: tienda.html,
pedido.html y la subcarpeta “clientes” que tienen relación con los movimientos de ventas de una
“tienda”.

De esta forma se puede comenzar con la definición de una estructura básica que pueda organizar
los distintos tipos de archivos que contendrán las páginas, tales como imágenes, hojas de estilo y
otros.

Fuente: material preparado para la asignatura.

8
ESTE DOCUMENTO CONTIENE LA SEMANA 3
En este sentido, dependiendo de la carpeta raíz, existirá una carpeta “CSS” para las hojas de estilo
y una carpeta “imágenes” para contener los archivos de este tipo.

A continuación se revisará una guía en la cual se explica cómo organizar los archivos de una
página, tomando como base los contenidos revisados en semanas anteriores:

Paso 1 De acuerdo a lo revisado en la semana 1, crear una carpeta “clase3” dentro del
directorio del servidor Apache “htdocs”. Esta carpeta será la raíz de un nuevo
sitio “clase3”.

Paso 2 Una vez que ya se ha creado la carpeta raíz, se debe ingresar a editor KompoZer
para que se definan las características del sitio, tal como lo muestra la siguiente
imagen.

Lo primero que se debe hacer es seleccionar el botón “Edit sites” en la ventana

del Site Manager y luego en la ventana Publish Settings ingresar el nombre del
sitio (Site Name). Posteriormente, a través del botón “Select directory” ubicar la
carpeta que contendrá las páginas y archivos del sitio. Para terminar se debe
presionar “Aceptar”.

9
ESTE DOCUMENTO CONTIENE LA SEMANA 3
Paso 3 En la ventana de administración de sitios debe aparecer la carpeta “clase3”
como raíz.

Paso 4 Posteriormente, se incorporan las carpetas “CSS” e “imágenes” a la estructura

del sitio, de acuerdo al siguiente proceso:
Se selecciona la carpeta raíz “clase3”, de la cual dependerán las carpetas
“imágenes” y “CSS”. Luego de ello se selecciona el botón “new folder” y se
ingresa el nombre de la nueva carpeta. Para finalizar se debe seleccionar la
opción “Ok”.

10
ESTE DOCUMENTO CONTIENE LA SEMANA 3
Paso 5 Al final se debiera tener la siguiente estructura:

1.4. CREACIÓN DE UNA PÁGINA WEB NUEVA

A continuación se muestra paso a paso cómo se debe crear una página inicial index.html dentro de
la carpeta raíz del sitio.

Paso 1 Se debe acceder a KompoZer y seleccionar la opción “Source”, que se encuentra en la

zona inferior de la pantalla, tal como se muestra en la siguiente imagen:

11
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 En dicha modalidad se puede observar que KompoZer ha generado de manera
automática la estructura básica de la página.

Paso 2 A continuación se debe guardar la página en la carpeta raíz “clase3”, para ello se
debe seleccionar en la ventana de administración del sitio (Site Manager) la carpeta
raíz “clase3”, y finalmente seleccionar el botón “Save”.

12
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 1.5. TÍTULOS

En un documento HTML pueden utilizarse hasta seis tipos de títulos, ordenados jerárquicamente
por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6.

Las etiquetas de los títulos introducen una línea superior en blanco. Como lo habitual después de
un título es un nuevo párrafo (<P>), que también introduce su propia línea, el resultado final suele
ser que una línea de título tiene una línea en blanco antes y otra después.

Las etiquetas de los títulos admiten indicaciones de alineación para centrar (align=“center”),
alinear a la derecha (align= “right”) o a la Izquierda (align= “left”).

Fuente: material preparado para la asignatura.

1.6. PÁRRAFO

El texto también puede organizarse en párrafos. En el siguiente ejemplo se agregan dos párrafos, y
para ello se usará el tag <p>, que define un elemento de este tipo.

13
ESTE DOCUMENTO CONTIENE LA SEMANA 3
La página debería verse así en el “preview” de KompoZer.

Podemos usar atributos de alineación para los párrafos:

A continuación se presenta un ejemplo del empleo de las alineaciones para un párrafo y cómo
estos afectan al texto.

Fuente: material preparado para la asignatura.

14
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 1.7. GUARDAR UNA PÁGINA WEB

A continuación se explicitará la manera correcta de guardar una página web. Para ello se utilizará
el ejemplo que se ha desarrollado a través de esta semana.

Lo primero que se debe realizar es guardar la nueva página como “index.html” dentro de la
carpeta raíz “clase3”. Para ello se debe seleccionar el botón “Save” que se encuentra en la
cabecera del programa Kompozer. Aparecerá una ventana emergente en la cual se debe indicar el
nombre que le asignará a la página, y posteriormente se debe presionar el botón “Guardar”.

A continuación se muestra una pantalla que ejemplifica lo anteriormente explicitado:

Fuente: material preparado para la asignatura.

Se tendrá entonces la página index.html dentro de la estructura que se ha estado trabajando

durante esta semana.

15
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 1.8. VISUALIZAR LA PÁGINA EN UN NAVEGADOR

A continuación se visualizará la pagina index.htm en la que se ha estado trabajando durante la

semana.

Lo primero que se debe hacer es chequear que el servicio Apache de XAMPP se encuentre
corriendo. Esto se comprueba abriendo el panel de control.

En la imagen anterior se puede visualizar que el servicio se encuentra corriendo y escuchando

peticiones HTTP en el puerto 80. Si al revisar el servicio este no se encuentra disponible, se debe
ejecutar presionando el botón “Start”.

Desde un cliente HTTP o navegador, se podrá visualizar la imagen escribiendo la siguiente URL:

Localhost/clase3/

16
ESTE DOCUMENTO CONTIENE LA SEMANA 3
IMPORTANTE:

Si no se pudiera presentar la página de prueba en el navegador, este problema se puede

solucionar escribiendo (según el puerto del servicio HTTP que usó en la instalación de XAMPP) al
final de la URL puerto88, tal como se expresa en el siguiente ejemplo:

http://localhost:88/clase3/

17
ESTE DOCUMENTO CONTIENE LA SEMANA 3
COMENTARIO FINAL
Esta semana se revisaron los temas más importantes para la creación y configuración de una
página web. Se hizo especial énfasis en la manera de organizar sus principales elementos, lo cual
permite a los desarrolladores una adecuada y expedita administración de sus componentes.

La utilización de las opciones de títulos y párrafos enriquece la visualización del texto y provee una
adecuada distribución dentro de la página. Estos temas son fundamentales pues se establecen
como base de los contenidos que se revisarán en semanas siguientes, cuando se avance en
formato HTML y uso de archivos CCS, entre otros.

18
ESTE DOCUMENTO CONTIENE LA SEMANA 3
REFERENCIAS
Powell, Ch. (1998). HTML, manual de referencia. Madrid: McGraw-Hill Interamericana.

W3schools (s. f.). HTML (5) Tutorial. Recuperado de: http://www.w3schools.com/html/default.asp

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2015). Página web. Programación HTML I. Semana 3.

19
ESTE DOCUMENTO CONTIENE LA SEMANA 3
 20
ESTE DOCUMENTO CONTIENE LA SEMANA 3