1. 1. Introducción
En este documento se pretende tratar la problemática ante la iniciación en HTML + CSS.
Este asunto se puede abordar desde varios puntos caminos, así como por medio de diversas
herramientas.
La intención de este documento es servir de guía para el aprendizaje de HTML + CSS con la
aplicación HTML-Kit. Con esto conseguiremos que el alumno aprenda el lenguaje basados
en etiquetas al mismo tiempo que se familiariza con una de las muchas aplicaciones que
permite el la creación y el diseño en páginas HTML.
Se puede descargar la herramienta desde www.html-kit.com
2. Contextualización.
Esta herramienta se puede utilizar como instrumento de iniciación y desarrollo dentro del
módulo Lenguajes de marcas y Sistemas de Gestión de Información del ciclo formativo de
grado superior ASIR.
La herramienta encaja en los siguientes contenidos:
• Etiquetas.
• Herramientas de edición.
• Elaboración de documentos XML bien formados.
• Identificación de etiquetas y atributos de HTML.
• XHTM: diferencias sintácticas y estructurales con HTML.
• Versiones de HTML y de XHTML.
• Herramientas de diseño Web.
• Hojas de estilo.
Satisface los Resultados de Aprendizaje:
• Utiliza lenguajes de marcas para la transmisión de información a través de la Web
analizando la estructura de los documentos e identificando sus elementos.
• Reconoce las características de lenguajes de marcas analizando e interpretando
fragmentos de código.
• Establece mecanismos de validación para documentos XML utilizando métodos para
definir su sintaxis y estructura.
3. Explicación de la herramienta:
La herramienta que pretendemos utilizar es HTML-Kit. Se ha seleccionado esta herramienta
por las siguientes ventajas que presenta:
• Es software libre.
• Es multilingüe.
• Ayuda a completar el código fuente.
• Ofrece ayuda para estructuras básicas de HTML y PHP/ASP.
• No ofrece diseño gráfico.
• Permite la publicación en FTP.
• Se actualiza limpia y fácilmente.
• Es estable.
Por otra parte, se han encontrado una serie de desventajas que pueden suponer algunos

2. problemas en la docencia.
• No es multiplataforma.
• Idioma por defecto en inglés.
• No ofrece diseño gráfico.
• Ayuda en inglés.
Esta plataforma es de características similares a:
• Kompozer.
• FirstPage.
HTML-Kit es una buena herramienta para la inciación a HTML + CSS debido a que permite
completar y ayudar a recordar las etiquetas, es muy estable y es gratuita. El único problema
importante que encontramos en contra es que sólo se ejecuta en plataformas Windows. Esto
que en el periodo de iniciación puede que no suponga ningún problema, sí puede ser un
contratiempo para trabajar de forma profesional.
Espacio de trabajo.
Parte superior: acceso rápido a herramientas.
Parte central: código fuente.
Parte derecha: explorador de proyectos.
Parte inferior: Depurador.

3. 4. Aplicación didáctica de la herramienta.
El objetivo que aquí se trata es iniciar a los alumnos en HTML + CSS mediante la utilización
de la herramienta de diseño HTML-Kit.
Para ello utilizaremos las comodidades que nos ofrece la herramienta como son:
• Coloreado de etiquetas.
• Autocompletado de etiquetas.
• Inserción de los atributos más importantes en algunas etiquetas.
• Lista de etiquetas.
• Facilidades para insertar elementos compuestos.

4. • Cierre de etiquetas automáticamente.
• Depurador de errores.
Ejercicios propuestos en clase:
Se supone que el alumno ya conoce la estructura de un documento HTML y algunas
etiquetas más importantes.
E1: Conocer y practicar con el entorno de Trabajo HTML-Kit. (aprox. 1h)
Mediante este ejercicio se pretende que el alumno sepa descargar e instalar la herramienta.
Además se le explicará cómo utilizar las opciones más básicas, así como dónde se
encuentran aquellas utilidades que le pueden resultar más útiles.
E2: Enlazar dos páginas web que creará el alumno. (aprox. 30min.)
Siguiendo con la toma de contacto y aprendizaje de la herramienta el alumno desarrollará
dos páginas HTML simples cuyo fin será enlazarlas y navegar entre ellas.

5. E3: Estudiar un código fuente. (aprox. 30min.)
El profesor proporcionará un documento HTML con ciertos elementos distintos para que los
alumnos lo investiguen, busquen los diferentes bloques y realicen cambios en la estructura y
en el aspecto gráfico utilizando etiquetas.
<html><!--documento HTML-->
<head> <!--cabecera-->
<title>Ejercicio de Clase</title> <!-- titulo de la pagina-->
</head><!--fin cabecera-->
<body><!--cuerpo de la pagina-->
<table border="0" width="100%"> <!-- tabla de cabecera-->
<tr>
<td>Esto es un simulaci&oacute;n de la p&aacute;gina de Google</td><!--celda1-->
<td align="right">Ejercicio de Clase 3</td> <!--celda2-->
</tr>
</table> <!-- fin tabla cabecera-->
<hr/> <!--linea-->
<br/>
<br/>
<center>
<img src="./google.gif" alt="Google"/> <!--imagen logo-->
<form action="#none" method="post"> <!-- formulario-->
<input type="text" name="caja_buscar" style="width:400"/> <!--caja texto-->
<br/>
<input type="button" class="boton" value="Buscar con Google"/><!--boton1-->
<input type="button" class="boton" value="Voy a tener suerte"/><!--boton2-->
</form> <!--fin formulario-->
</center>
</body><!--fin cuerpo-->
</html><!--fin documento-->

6. E4: Estudiar hoja de estilo. (aprox. 30min.)
El profesor ofrece una hoja de estilo al alumno para que compruebe cómo y de qué está
compuesta.
body{
font-family:arial;
font-size:13pt;
background-color:pink;
}
table{
width:100%;
font-family:courier;
font-size:10pt;
color:yellow;
background-color:green;
}
hr{
width:100%;
background-color:red;
height:4px;
}
img{
border:3px;
border-style:solid;
border-color:purple;
width:567;
height:84;
}
input.boton{
font-family:courier;
font-size:16pt;
}
E5: Enlazar la hoja de estilo con la página HTML. (aprox. 30min.)
En este caso el alumno aprenderá la línea de código que permite enlazar una hoja de estilo
con un documento HTML. Para ello enlazará una hoja de estilo facilitada por el profesor con
la página HTML anterior.
<head> <!--cabecera-->
<title>Ejercicio de Clase</title> <!-- titulo de la pagina-->
<link rel="stylesheet" href="./estilo.css" type="text/css" media="screen"><!--
enlace hoja de estilo-->
</head><!--fin cabecera-->

7. E6: Modificar la hoja de estilo anterior para obtener el formato habitual. (aprox. 1hora.)
El alumno alterará la hoja de estilo en varias ocasiones y comprobará cómo cambia el
aspecto gráfico de la página HTML.
Vista HTML con la hoja de estilo proporcionada por el profesor:
Vista HTML con la hoja de estilo modificada por el alumno:
E7: Crear un sitio web. (aprox. 6h.)
El alumno deberá crear un sitio web que estará compuesto por mínimo 5 páginas html y 2
hojas de estilo distintas. Se trata de simular la web de una empresa de venta de bicicletas,
viajes, librería, tienda de deporte, etc.. Aunque la temática y el formato son abiertos todos los
sitios deben tener una página de portada y otra página con la información de contacto y con
un formulario que podrá utilizarse en prácticas posteriores como recurso para enviar datos a
BD.

8. Metodología:
Para abordar este tema se propone la siguiente metodología.
Ejercicio 1: Método expositivo. El profesor explicará cómo descagar e instalar la aplciación
HTML-Kit, así como las funciones más importantes de la herramienta utilizando el proyector.
Los alumnos beberán practicar y familiarizarse con la interfaz.
Ejercicios 2 – 6: Método por descubrimiento. El alumno trabajará a su ritmo y cuando
termine cada ejercicio presentará la solución al profesor.
Ejercicio 7: Aprendizaje por proyecto. El alumno comentará con el profesor qué tipo de
negocio quiere desarrollar, cuántas páginas y qué ideas tiene. Si es preciso el profesor
reconducirá la práctica. Puesto que este ejercicio durará varias sesiones el alumno debe
mostrar al profesor el estado del ejercicio al fin de cada sesión.
Para esto, el profesor facilitará una carpeta a cada alumno con el material y explicaciones
necesarios para que ellos mismos vayan trabajando a su ritmo.
Los alumnos que finalicen antes el ejercicio 6 podrán hacer el ejercicio final más completo o
ayudar a los compañeros más atrasados. Por otra parte, para aquellos alumnos que tengan
más dificultades se les podrá facilitar cierto material para el ejercicio 7 (temática del sitio,
imágenes, página de inicio).
Tiempo aproximado total: 10 horas
4 horas ejercicios 1 – 6
6 horas ejercicio 7.
Este tiempo presupone que el alumno ya conoce nociones teóricas y las etiquetas básicas
para el diseño de HTML.

9. 5. Conclusiones.
Como conclusión decir que HTML-Kit es una herramienta apta para la docencia del módulo
de Lenguajes de marcas y Sistemas de Gestión de Información, puesto que permite
desarrollar sin problemas la mayoría de sus contenidos y que además satisface en gran
parte los Recursos de Aprendizaje de del módulo.
Otros puntos a favor son su potencia, estabilidad y que es una herramienta gratuita. No
obstante, el hecho de no ser multiplataforma es un gran inconveniente dentro del ámbito
docente, pues hoy por hoy solo funciona bajo sistemas Windows.
Aún así, podemos afirmar que la herramienta HTML-Kit puede resultar muy útil a efector
docentes para la iniciación y desarrollo de documentos XML, HTML, CSS y PHP, entre otros.
Jaume Gosàlbez Lloret.
Aprendizaje y enseñanza de la informática.