HTML.

PROGRAMACIÓN HTML I
Instituto IACC
09 de noviembre de 2018
Actividad

Instale Kompozer y XAMPP de acuerdo a las indicaciones entregadas en el contenido semanal.

Elabore un tutorial que describa el proceso de instalación y configuración de ambos programas,
considerando capturas de pantalla de cada uno de los pasos y una breve explicación del proceso que se
debe seguir. Puede entregar el tutorial en Word (en la plantilla establecida por IACC para entrega de la
tarea de la semana) o PowerPoint.
Una vez que haya instalado ambos programas, debe crear una página con las siguientes características:
 Página de bienvenida para el sitio “Tarea 1”.
 La página será titulada como “Bienvenida de Tarea 1”. Debe mostrar el mensaje “Bienvenidos
alumnos” en el cuerpo de la página.
 La página debe ser levantada a través del puerto 85 del servidor web Apache de XAMPP.

Desarrollo

Tutorial de instalación XAMPP

Primero descargaremos la aplicación del sitio https://www.apachefriends.org/es/index.html,

eligiendo la opción según nuestro sistema operativo. En este caso elegiremos el paquete para Windows.

Una vez descargado el paquete, lo visualizaremos de la siguiente forma:

 Para realizar la instalación, le damos doble clic y Windows nos solicitara confirmación para
continuar.

Le damos que SI y nos aparece la siguiente ventana

 Esta ventana nos indica que se está ejecutando un antivirus el cual puede ralentizar o interferir
en la instalación del software, visitando el link indicado podemos conseguir mayor información. Nos
pregunta si continuamos con la instalación, le damos clic en YES y nos aparecerá la siguiente ventana
 La aplicación nos da la bienvenida, presionamos en NEXT y nos aparecerá la siguiente
ventana.

En esta ventana elegimos los servicios y lenguajes que deseamos instalar. Una vez elegidos
presionamos en NEXT.
Acá nos muestra la ruta donde quedara instalada la aplicación. Presionamos en NEXT

Presionamos en NEXT nuevamente

Presionamos en NEXT, y comenzara la instalación
Después de unos
minutos, nos indicara que la instalación ha finalizado, nos pregunta si deseamos abrir el panel de control,
dejamos seleccionada la opción y presionamos en FINISH
Configuración de XAMPP

Una vez finalizada la instalación y como le indicamos que nos abriera el panel de control,
procederemos a la configuración de XAMPP. No podemos dejar de mencionar que si no elegimos la
opción de abrir el panel de control inmediatamente, podemos abrirlo desde el menú de inicio de
Windows, como se muestra en la siguiente imagen:

Al abrir el panel de control debemos seleccionar el idioma, como vemos solo tenemos dos Inglés
y Alemán. Elegiremos Inglés y presionamos en SAVE
 A continuación se nos abrirá la siguiente ventana

En esta ventana nos muestra los servicios y lenguajes que anteriormente seleccionamos y se

Se utilizarán los botones Start/Stop para iniciar o detener los servicios de XAMPP: Apache, MySQL,
Filezilla (servidor FTP).

En el botón CONFIG, podemos cambiar el puerto en el cual deseamos trabajar, para ello
presionamos el botón y seleccionamos la primera opción que es Apache (httpd.conf)
 Se nos abrirá un bloc de notas como en la siguiente imagen:

Acá nos muestra el puerto que por defecto viene configurado, el cual es el puerto 80.

Para corroborar que la instalación se realizó correctamente, presionamos en el botón START, en

el módulo APACHE
Nos muestra que está en funcionamiento

Presionamos en el botón ADMIN y se despliega la siguiente ventana en el navegador por defecto

 Con esto hemos finalizado la configuración de la aplicación.

Una de las cosas importantes a las que se debe poner atención en relación a la utilización del
servicio de XAMPP es que la carpeta en la cual se procederá a crear los sitios y páginas de prueba es la
carpeta “htdocs” dentro de la carpeta “xampp”.

Tutorial de instalación de KOMPOZER

 Primero descargamos la aplicación desde http://descargar.cnet.com/KompoZer/3000-10247_4-
10655200.html, se eligió esta dirección ya que el sitio oficial no está disponible
Una vez descargada la aplicación en la carpeta de destino, se nos mostrara lo siguiente:

Descomprimimos el archivo con WinRAR o el descompresor instalado en el PC.

Al descomprimir el archivo, se
no creara la siguiente carpeta:
 Abrimos la carpeta y buscamos el archivo ejecutable kompozer.exe y le damos clic derecho y
creamos un acceso directo en el escritorio

Lo cual se mostrara de la siguiente manera:

 Con esto ya tenemos instalada la aplicación en el equipo

Configuración de KOMPOZER

La configuración es muy sencilla, no tendremos que seleccionar nada adicional, para esto
abrimos la aplicación y nos vamos a la pestaña TOOLS

Seleccionamos OPTIONS
 ,

Se nos despliega el siguiente cuadro

En este cuadro vamos a ADVANCED y debemos corroborar que la opción de HTML4 este
seleccionada.
 Y con esto finalizamos la configuración de KOMPOZER

Creación de la Página

Para empezar con la creación de la página, nos dirigiremos a la carpeta “htdocs” de Xampp y
crearemos una carpeta llamada “Tarea1”

Abrimos el panel de control de Xampp y presionaremos en CONFIG para cambiar el puerto 80 a

85
Guardamos el archivo y lo cerramos, vamos nuevamente al panel de control y presionamos en STAR

Observamos que el servidor apache esté en funcionamiento con el puerto 85

 Abriremos la aplicación Kompozer y presionaremos en “edit sites” representado con un ícono
que posee dos pantallas de computador. Se desplegará la ventana llamada “Publish Setting”
 En esta segunda ventana, en el casillero “Site Name” se debe ingresar el nombre “Bienvenida de
Tarea 1” y mediante el botón “Select directory” buscar en el disco duro la carpeta “Tarea1” previamente
creada dentro de “htdocs”.

Dentro del editor KompoZer se crea una página web, y en la modalidad de edición “HTML Tags”,
ubicada en la zona inferior de la pantalla, se puede colocar un título a la página y algún mensaje en el
cuerpo de la misma

Para observar los cambios hechos en el paso anterior, utilizamos la modalidad de edición
Preview, la
cual muestra el
sitio tal como se
vería en un
navegador.
 Se guarda dentro de la carpeta “Tarea1” la página creada, con el nombre de archivo “index”. Es
importante destacar que la extensión “.html” será aportada automáticamente por KompoZer al grabar.
 Se puede observar que la nueva página aparece en la ventana de administración de sitios, dentro
de la carpeta “Bienvenida de Tarea 1”.

Posteriormente se revisa cómo se despliega la página en el navegador (en este caso Internet Explorer).
Para ello se debe escribir la siguiente URL en la barra de direcciones: http://localhost:85/Tarea1/. Es muy
importante recordar el puerto en el cual se levanta el servicio de Apache del ambiente XAMPP, el cual
debe ser especificado en la dirección a ingresar.

Bibliografía
(2018). PROGRAMACIÓN HTML I (ed., Vol. Semana 1, pp.). Santiago, IACC.