Iniciación  a HTML+CSS INTRODUCCIÓN <ul><li>Iniciación a HTML.
Utilizando CSS.
Herramienta HTML-Kit.
Ejercicios prácticos. </li></ul>
Iniciación  a HTML+CSS CONTEXTUALIZACIÓN MÓDULO: Lenguajes de Marcas y Sistemas de Gestión de la Información. CICLO: Admin...
Iniciación  a HTML+CSS CONTEXTUALIZACIÓN CONTENIDOS DEL CURRÍCULO: <ul><li>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. </li></ul>
Iniciación  a HTML+CSS CONTEXTUALIZACIÓN RESULTADOS DE APRENDIZAJE: <ul><li>Utiliza lenguajes de marcas para la transmisió...
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. </li></ul>
Iniciación  a HTML+CSS HERRAMIENTA ->  HTML-Kit
Iniciación  a HTML+CSS HERRAMIENTA VENTAJAS: <ul><li>Es software  libre.
Próxima SlideShare
Cargando en…5
×

Intro html+css

1.268 visualizaciones

Publicado el

Publicado en: Educación, Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.268
En SlideShare
0
De insertados
0
Número de insertados
31
Acciones
Compartido
0
Descargas
11
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Intro html+css

  1. 1. Iniciación a HTML+CSS INTRODUCCIÓN <ul><li>Iniciación a HTML.
  2. 2. Utilizando CSS.
  3. 3. Herramienta HTML-Kit.
  4. 4. Ejercicios prácticos. </li></ul>
  5. 5. Iniciación a HTML+CSS CONTEXTUALIZACIÓN MÓDULO: Lenguajes de Marcas y Sistemas de Gestión de la Información. CICLO: Administración Sistemas Informáticos en Red. CURSO: Primero (18 años)
  6. 6. Iniciación a HTML+CSS CONTEXTUALIZACIÓN CONTENIDOS DEL CURRÍCULO: <ul><li>Etiquetas.
  7. 7. Herramientas de edición.
  8. 8. Elaboración de documentos XML bien formados.
  9. 9. Identificación de etiquetas y atributos de HTML.
  10. 10. XHTM: diferencias sintácticas y estructurales con HTML.
  11. 11. Versiones de HTML y de XHTML.
  12. 12. Herramientas de diseño Web.
  13. 13. Hojas de estilo. </li></ul>
  14. 14. Iniciación a HTML+CSS CONTEXTUALIZACIÓN RESULTADOS DE APRENDIZAJE: <ul><li>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.
  15. 15. Reconoce las características de lenguajes de marcas analizando e interpretando fragmentos de código.
  16. 16. Establece mecanismos de validación para documentos XML utilizando métodos para definir su sintaxis y estructura. </li></ul>
  17. 17. Iniciación a HTML+CSS HERRAMIENTA -> HTML-Kit
  18. 18. Iniciación a HTML+CSS HERRAMIENTA VENTAJAS: <ul><li>Es software libre.
  19. 19. Es multilingüe.
  20. 20. Intuitiva.
  21. 21. Ayuda a completar el código fuente.
  22. 22. Ofrece ayuda para estructuras básicas.
  23. 23. Gran cantidad de plugins de fácil instalación.
  24. 24. Corrección TidyHTML.
  25. 25. No ofrece diseño gráfico.
  26. 26. Permite la publicación en FTP.
  27. 27. Se actualiza limpia y fácilmente.
  28. 28. Es estable. </li></ul>
  29. 29. Iniciación a HTML+CSS HERRAMIENTA DESVENTAJAS: <ul><li>No es multiplataforma.
  30. 30. Idioma por defecto en inglés.
  31. 31. No ofrece diseño gráfico.
  32. 32. Ayuda completa en inglés. </li></ul>HERRAMIENTAS SIMILARES: <ul><li>Kompozer
  33. 33. First Page </li></ul>
  34. 34. Iniciación a HTML+CSS HERRAMIENTA OBJETIVO -> Iniciación al Desarrollo Web con HTML+CSS. ¿Qué nos proporciona la herramienta? <ul><li>Coloreado de etiquetas.
  35. 35. Autocompletado de etiquetas.
  36. 36. Inserción de los atributos más
  37. 37. importantes en algunas etiquetas. </li></ul>
  38. 38. Iniciación a HTML+CSS HERRAMIENTA ¿Qué nos proporciona la herramienta? <ul><li>Lista de etiquetas.
  39. 39. Facilidades para insertar
  40. 40. elementos compuestos. </li></ul>
  41. 41. Iniciación a HTML+CSS HERRAMIENTA ¿Qué nos proporciona la herramienta? <ul><li>Cierre de etiquetas automáticamente.
  42. 42. Depurador de errores.
  43. 43. Corrección TidyHTML. </li></ul>
  44. 44. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA METODOLOGÍA: <ul><li>Expositiva
  45. 45. Aprender por descubrimiento.
  46. 46. Aprender por proyectos. </li></ul>RECURSOS Y EJERCICIOS: <ul><li>Introducción teórica sobre HTML y CSS.
  47. 47. Ejercicios de desarrollo.
  48. 48. Práctica </li></ul>
  49. 49. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA EJERCICIOS: E1: Conocer y practicar con el entorno de Trabajo HTML-Kit (Método Expositivo) . Descargar e instalar la herramienta. Utilizar las opciones más básicas y utilidades más útiles. E2: Enlazar dos páginas web que creará el alumno (A.Descubrimiento) . 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.
  50. 50. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA EJERCICIOS: E3: Estudiar un código fuente (A.Descubrimiento) . El profesor proporcionará un documento HTML para que los alumnos lo investiguen, realicen cambios en la estructura, etc.
  51. 51. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA EJERCICIOS: E4: Estudiar hoja de estilo (A.Descubrimiento) . El profesor ofrece una hoja de estilo al alumno para que compruebe cómo y de qué está compuesta. E5: Enlazar la hoja de estilo con la página HTML (A.Descubrimiento) . 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á la hoja de estilo del ejercicio 4 con la página HTML del ejercicio 3.
  52. 52. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA EJERCICIOS: E6: Modificar la hoja de estilo anterior para obtener el formato habitual (A.Descubrimiento) . El alumno alterará la hoja de estilo en varias ocasiones y comprobará cómo cambia el aspecto gráfico de la página HTML.
  53. 53. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA PRÁCTICA FINAL: E7: Crear un sitio web (A.Proyecto) . Mínimo 5 páginas html y 2 hojas de estilo distintas. Simular la web de una empresa cualquiera. Común: - Portada - Meú de navegación entre distintas páginas. - Página de contacto y con un formulario. Para utilizarse en prácticas posteriores como recurso para enviar datos a BD.
  54. 54. Iniciación a HTML+CSS APLICACIÓN DIDÁCTICA EJERCICIOS: RECURSOS: El profesor facilitará una carpeta con el material de todos los ejercicios para que cada alumno trabaje a su ritmo. Siempre con el editor HTML-Kit. PLANIFICACIÓN: <ul><li>2 horas: Introducción teórica y etiquetas HTML básicas .
  55. 55. 10 horas: </li><ul><ul><li>4 horas ejercicios 1 – 6.
  56. 56. 6 horas para Práctica final. </li></ul></ul></ul>
  57. 57. Iniciación a HTML+CSS CONCLUSIÓN HTML-Kit en el proceso en eseñanza – aprendizaje: Ventajas: <ul><li>Intuitiva.
  58. 58. Gratuita.
  59. 59. Estable.
  60. 60. Correctora. </li></ul>Inconvenientes: <ul><li>No es multiplataforma -> Windows.
  61. 61. Ayuda e idioma por defecto en inglés. </li></ul>

×