Denominación del Programa de Formación: Tecnico en Sistemas

Código del Programa de Formación: 228185

Nombre del Proyecto ( si es formación Creacion del centro de atención al usuario
(CAU) para el mantenimiento integral de
Titulada) equipos de computo, redes de datos y
herramientas ofimaticas para las IDE en
convenio con el cdae
Fase del Proyecto ( si es formación Planeación.
Titulada)
Actividad de Proyecto(si es formación Analizar las necesidades Ofimáticas y
Titulada) Programar el diseño de Eventos para
Correspondencia y Bases de Datos
Competencia lenguaje de programación orientado a
eventos sintaxis del lenguaje de
programación orientado a eventos,
controles y propiedades
Resultados de Aprendizaje Alcanzar: aplicar controles y estructuras básicas de
programación de un lenguaje orientado a
eventos de acuerdo con el problema a
solucionar.
Duración de la guía 20 Horas

2. PRESENTACIÓN

Qué significa HTML5

HTML5 es un estándar que sirve como referencia del software que conecta con la
elaboración de páginas web en sus diferentes versiones, define una estructura básica y
un código (denominado HTML) para la definición de contenido de una página web,
como texto, imágenes, vídeos, juegos, entre otros.

GFPI-F-019 V03
 HyperText, cuyo significado es hipertexto, que no es más que un texto que enlaza
con otros contenidos , que pueden ser otro texto u otro archivo. Esto es la base del
funcionamiento de la web tal y como la conocemos , que no es más que páginas y
recursos interconectados.

Markup , significa marca o etiqueta, ya que todas las páginas web están construidas
en base a etiquetas , desde las primeras versiones hasta las últimas etiquetas de
HTML5. Un ejemplo de una etiqueta HTML es la que identifica a un párrafo, que se
compone de la etiqueta, el contenido de la etiqueta y el cierre del
párrafo: <p>HOLA</p> .
Languaje ,cuyo significado es lenguaje, porque HTML es un lenguaje, es decir, tiene
sus normas, tiene su estructura y una serie de convenciones que nos sirven para
definir tanto la estructura como el contenido de una web.

Funcionamiento HTML5

Vamos a ver cómo es proceso cuando se solicita una página HTML a través del
navegador. El proceso es el siguiente:

Desde el navegador se realiza una petición a un servidor, lo que se hace a través de

una dirección del tipo http://..../index.html . Después el servidor recupera de su disco
duro esa página, la devuelve al navegador y la página se muestra.

GFPI-F-019 V03
3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 ACTIVIDADES DE REFLEXIÓN INICIAL:

Funcionamiento de sitios web

¿Cómo funcionan los sitios web?

No tengas miedo de hacer preguntas, incluso si piensas que son absurdas. Es muy
importante hablar un poco antes de entrar de lleno en el diseño del sitio. Estoy
seguro de que accedes a sitios web habitualmente. Para ello, se ejecuta un programa
llamado navegador web, (Chrome, Firefox, Opera, Vivaldi).

Es importante saber que en el mundo de la programación hay muchas formas de

resolver un mismo problema, y que todas ellas pueden ser igualmente válidas.
Dicho esto, quiero aclarar que el objetivo de esta guia no es aprender todas y cada
una de las formas de resolver un problema (esto se va aprendiendo con años de
práctica), y es por ello que no entraré en profundidad en todos y cada uno de los
elementos y características de cada lenguaje.

Las definiciones estarán simplificadas, esto está hecho a conciencia ya que como
decía antes, no he querido asumir que tengas ningún conocimiento previo sobre
desarrollo web. Por eso, para facilitarte la comprensión y evitar distraerte del
objetivo del curso, te explicaré conceptos en muchas ocasiones que no serán 100%
precisos pero que sí correctos.
3.2 ACTIVIDADES DE IDENTIFICACIÓN DE CONOCIMIENTOS:

HTML5 provee básicamente tres características: estructura, estilo y

funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando
algunas APIs (Interface de Programación de Aplicaciones) y la
especificación de CSS3 por completo no son parte del mismo, HTML5 es
considerado el producto de la combinación de HTML, CSS y Javascript.
Estas tecnologías son altamente dependientes y actúan como una sola unidad
organizada bajo la especificación de HTML5.
GFPI-F-019 V03
  1)No conoce la utilidad que tiene un editor de código?
 2)Ha utilizado o alguna vez un editor de codigo, como Sublime Text?
 4)Conoce la interfaz gráfica elaborada por medio de HTML5?

3.3 ACTIVIDADES DE APROPIACIÓN DEL CONOCIMIENTO (CONCEPTOS Y

TEORIA)

HTML5 nos ha traído varias mejoras en lo que respecta al lenguaje HTML. Una de

ellas es lo que llamamos la semántica del código. Aunque recordemos que HTML5
es mucho más que el propio lenguaje HTML, puesto que también incluye mejoras
en el CSS y en las API de Javascript.
Hoy, la recomendación es usar otro conjunto de etiquetas que sí nos aportan un
significado al contenido que engloban. Pero esto no quiere decir que las etiquetas
antiguas se dejen de usar, sino que ahora tenemos otra serie de etiquetas con valor
semántico, que vienen a aportar nuevas facilidades que te resumiremos en el
siguiente punto. De momento, analicemos estas etiquetas nuevas con valor
semántico con la estructura de una web en mente.
Las funciones de HTML y CSS Para indicar al ordenador lo que quieres hacer,
tendrás que utilizar un lenguaje de programación que comprendas. Y es aquí donde
las cosas se ponen algo difíciles, porque vas a tener que aprender dos. ¿Por qué se
crearon dos? Uno habría bastado, ¿no? Manejar dos lenguajes será Desarrollo
Aplicaciones Web.
Rafael Menéndez-Barzanallana Asensio. DIS. UMU HTML 4 de 48 supuestamente
el doble de complejo y se precisará el doble de tiempo para aprender ... pero no es
el caso. Si hay dos lenguajes es, en cambio, para facilitar las cosas. Vamos a tratar
con dos lenguajes que son complementarios, ya que tienen funciones diferentes:
HTML (HyperText Markup Language): apareció por primera vez en 1991 en el
lanzamiento de la Web. Su función es la gestión y organización del contenido. Así
que en HTML puedes escribir lo que deseas mostrar en la página: texto, enlaces,
imágenes … Se podría decir: "Este es mi título, este es mi menú, aquí está el texto
principal de la página, aquí hay una visualización de la imagen, etc. ".
CSS (Cascading Style Sheets, también conocidas como hojas de estilo): su papel es
gestionar la apariencia de la página web (diseño, posicionamiento, colores, tamaño
de texto ...). Este lenguaje ha complementado el código HTML desde 1996.
También puedes haber oído hablar de XHTML. Esta es una variante de HTML que
es más rigurosa y que es un poco más complicada de manejar. En pocas palabras, el
GFPI-F-019 V03
HTML apareció por primera vez en 1991.

Estructura básica de HTML5 en editor de texto.

Por estos motivos, es por lo que aparecen las etiquetas semánticas y se recomienda
usarlas para crear la estructura básica de contenido de una web y mejorar
el posicionamiento SEO. Google valora positivamente los sitios que le ayudan a
entender mejor la temática que tienen, tanto el web a nivel global como el
particular en cada página individual. Solo ese motivo es suficiente para
convencernos a todos de usarlas.

GFPI-F-019 V03
Etiquetas básicas

La primera línea es el tipo de documento. Es esencial porque es lo que indica que

se trata de una página web HTML. En realidad no es una etiqueta como cualquier
otra (pues comienza con un signo de exclamación), se puede considerar que es sólo
la excepción que confirma la regla. Esta línea fue alguna una vez un tipo de
documento muy complejo. Era imposible retenerla en la cabeza. Para XHTML 1.0,
se tenía que escribir: En HTML5, se decidió simplificarla, para el deleite de los
desarrolladores. Cuando se ve una etiqueta de tipo corto (), significa que la página
está escrita en HTML5.

Este es el código de la etiqueta principal. Abarca todo el contenido de una página.

Como puedes ver, la etiqueta de cierre
se encuentra al final de código.

Encabezado <head> y cuerpo <body>

La cabecera : esta sección proporciona información general sobre la página, como

su título, la codificación (por gestión de caracteres especiales), etc. Esta sección
suele ser bastante corta. La información en la cabecera no se muestran en la página,
se trata de información general para el equipo. Es sin embargo, muy importante.

El cuerpo
Aquí es donde se encuentra la parte principal de la página. Todo lo que escribas
GFPI-F-019 V03
aquí se mostrará en la pantalla. Este es el interior del cuerpo donde vamos a escribir
la mayor parte de nuestro código.

Esta etiqueta especifica la codificación utilizada en el archivo .html. Sin entrar en

detalles, ya que esto puede convertirse rápidamente en complicado, la codificación
indica cómo se guarda el archivo. Determina la forma en que los caracteres
especiales se mostrarán (acentos, ideogramas chinos y caracteres japoneses, árabes,
etc.).

Para terminar esta lección vamos a aprender el significado de ocho de las etiquetas
que con más frecuencia tendremos que usar cuando creemos páginas web:

<p></p>: representa un párrafo .

<br>: representa un salto de línea.

<h1></h1>: esta etiqueta se utiliza para representar el encabezado de una página,

como si fuera el índice de un libro. Puede variar desde 1 hasta 6 para diferenciar
subniveles.

<ul></ul>: representa una lista de elementos, donde el orden de los elementos no

es importante - esto quiere decir que el cambio del orden no modifica el
significado.

<ol></ol>: representa una lista de elementos, donde el orden de los elementos sí es

importante - esto quiere decir que el cambio del orden modifica el significado.

<li></li>: representa un elemento de la lista y su padre siempre tiene que ser una
etiqueta ol o ul.

<strong></strong>: representa algo muy importante, serio (para avisos o

precauciones) o urgente (que debe ser leído antes).

<em></em>: sirve para enfatizar en el contenido.

GFPI-F-019 V03
<menu>La etiqueta menu representa las listas de menú, es utilizado para menús
contextuales, barras de herramientas y para listar formularios de control y
comandos.

<!-- -->: se utiliza para añadir comentarios dentro del código que el usuario no
podrá ver. Por ejemplo para añadir notas de tareas pendientes, aclaraciones que nos
ayuden a nosotros o a otras personas a entender el código.

ACTIVIDAD DE Actividades (simulación)

APRENDIZAJE N° 1 1. Explora con tu grupo de trabajo
Responda las siguientes preguntas las etiquetas del entorno grafico
ya que conoces el entorno grafico de HTML5
AMBIENTE Y MATERIALES: Tiempo invertido en el desarrollo de la
actividad: 4 horas
Presencial Desescolarizad Virtual
0 horas a 4 horas 1 horas

Ahora que le es más familiar el entorno HTML5 conteste los siguientes puntos:

¿una de las ventajas de HTML es?

¿En que forma se escribe HTML?

¿Para programar en HTML5, que tipo de software debemos descargar?

¿HTML5 funciona en muy pocos navegadores?

¿Cómo comenzarías un documento HTML5?

¿Con que etiqueta HTML5 armarías el menú de navegación de un sitio?

¿Con que etiqueta incluirías los contenidos importantes de un sitio en HTML5?

¿HTML5 será mucho más estricto a la hora de escribir del código?

ACTIVIDAD DE Actividades (simulació)

GFPI-F-019 V03
 APRENDIZAJE N° 2 Reconoce los elementos básicos de la
Investiga sobre los elementos de estructura HTML
tu primera pagina
AMBIENTE Y MATERIALES: Tiempo invertido en el desarrollo de la
actividad:
Presencial Desescolarizad Virtual
0 horas a 4 horas 1 horas

Editor de texto.

Son programas que permiten crear y modificar archivos digitales compuestos

únicamente por texto sin formato, conocidos comúnmente como editores de texto o
texto plano. El programa lee el archivo e interpreta los bytes leídos según el código
de caracteres que usa el editor. Hoy en día es comúnmente de 7- ó 8-bits en ASCII
o UTF-8, rara vez EBCDIC.

Por ejemplo, un editor ASCII de 8 bits que lee el número binario 0110 0001
(decimal 97 ó hexadecimal 61) en el archivo lo representará en la pantalla por la
figura a, que el usuario reconoce como la letra "a" y ofrecerá al usuario las
funciones necesarias para cambiar el número binario en el archivo. Los editores de
texto son incluidos en el sistema operativo o en algún paquete de software instalado
y se usan cuando se deben crear o modificar archivos de texto como archivos de
configuración, scripts o el código fuente de algún programa.

Actividad de aprendizaje

 Abrir la carpeta con el Sofware Editor de texto suministrado por el

instructor.
GFPI-F-019 V03
 Ejecute la aplicación dando doble clic en el icono señalado.

 Acontinuacion se abrirá el editor

de texto en blanco como lo
muestra la imagen.

GFPI-F-019 V03
 Escribimos las etiquetas básicas para el funcionamiento de nuestro archivo
HTML como lo muestra la imagen y tomamos un pantallazo.

 Damos clic en FILE y nos vamos hasta la pestaña Save As…y lo guardamos
con el nombre
index en la
carpeta
Documentos.

GFPI-F-019 V03
 Seguidamente nos dirigimos al archivo guardado, damos doble clic y nos
abrirá el archivo en el navegador.

GFPI-F-019 V03
 Entregables, crear un archivo de Word con el nombre Mi primera pagina y
pegar los dos pantallazos, editor de texto con la estrutura básica y archivo
final abierto con el navegador.

ACTIVIDAD DE Actividades (simulació)

APRENDIZAJE N° 3 1. Manejo editor de texto y etiquetas
Escriba las etiquetas básicas de basicas
HTML5 en un editor de Texto.
AMBIENTE Y MATERIALES: Tiempo invertido en el desarrollo de la
actividad:10 horas
Presencial Desescolarizad Virtual
0 horas a 9 horas 1 horas

GFPI-F-019 V03
3.4 TRANSFERENCIA DEL CONOCIMIENTO
Elabore un resumen a mano en hojas lancas donde relacione los temas vistos en la guía,
debe incluir imágenes de recoretes de revistas y periódicos para facilitar el entendimiento
de la información, el documento debe estar totalmente organizado, como minimo deberá
contener 5 hojas.

Pautas para la elaboración del resumen

 Portada
 Introducción
 Marco teorico
 Conclusiones
 Bibliografía

4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Criterios de Evaluación Técnicas e Instrumentos

Aprendizaje de Evaluación
Evidencias de Utiliza funciones propias Técnica:
Conocimiento: del procesador de textos Formulación de preguntas
para la codificación de
Cuestionario de código.
reconocimiento entorno Instrumento:
de trabajo con lenjuage Cuestionario
HTML
Evidencias de Utiliza funciones propias Técnica: valoración de
Desempeño: del procesador de textos producto
GFPI-F-019 V03
Escribe etiquetas básicas Instrumento: lista de
de lenguaje HTML chequeo

Evidencias de Utiliza funciones propias

Producto: del procesador de texto Técnica: valoración de
producto
Aplicaciones propuestas Instrumento: lista de
integrando editores de chequeo
texto, para facilitar el
desarrolo de paginas web

Resumen

5. GLOSARIO DE TÉRMINOS

Etiqueta: es una herramienta que los autores pueden utilizar para especificar
el lenguaje en que el contenido es presentado en un elemento o en un
documento HTML.

Lenguaje de programacion: es un programa destinado a la construcción de otros

programas informáticos. Su nombre se debe a que comprende un lenguaje formal
que está diseñado para organizar algoritmos y procesos lógicos que serán luego
llevados a cabo por un ordenador o sistema informático.

Navegador web: es un programa o Software, por lo general gratuito, que nos

permite visualizar páginas web a través de Internet o en el propio ordenador,
además posibilita acceder a otros recursos de información alojados también
en Servidores Web, como pueden ser videos, imágenes, audio y archivos XML.

Pagina Web:Una página Web es la unidad básica del World Wide Web, o
simplemente Web, como se le llama comunmente. El Web está integrado por sitios
web y éstos a su vez por páginas web.

GFPI-F-019 V03
6. REFERENTES BIBLIOGRÁFICOS

Construya o cite documentos de apoyo para el desarrollo de la guía, según lo establecido en la guía de
desarrollo curricular

-Gauchat, J. (2012). El Gran Libro HTML5 y CSS3. Recuperado de:

https://gutl.jovenclub.cu/wpcontent/uploads/2013/10/El+gran+libro+de+HTML5+
CSS3+y+Javascrip.pdf

- Leonidas Herrera (2012, Diciembre 12). HTML5 y CSS3: Primeros pasos en

HTML5 de: https://www.youtube.com/watch?v=Gp2MwhDS53c

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autor (es) Centro de Desarrollo Aroindustrial y 13/04/2020

Empresarial

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)

Nombre Cargo Dependencia Fecha Razón del

Cambio

Autor (es)

GFPI-F-019 V03