GFPI-F-019 Formato Guia de Aprendizaje HTML Multimedia
GFPI-F-019 Formato Guia de Aprendizaje HTML Multimedia
GFPI-F-019 Formato Guia de Aprendizaje HTML Multimedia
Nombre del
Proyecto:
Página 1 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
2. INTRODUCCIÓN
Páginas web
Es un documento que forma parte de un sitio web, este documento posee enlaces hacia otras páginas,
imágenes texto, video etc. Las páginas web están desarrolladas en HTML cuya versión actual es HTML5 el
cual es interpretado por navegadores web tales como internet explorer, Firefox, Chrome, opera, safari entre
otros. Existen 2 tipos de páginas web las estáticas cuyo contenido es predeterminado y las dinámicas cuyos
contenidos se generan al momento de ser solicitados al servidor web a través de lenguajes interpretados
como javascript
HTML5
Es un lenaguaje markup cuyas siglas significan “Hyper Text Markup Languaje” el cual es usado para
estructurar y presentar contenido para la web, HTML5 permite formatear el layout de nuestras páginas web
de tal forma que nos permite saber donde están los elementos, donde poner las imágenes, texto.
<!DOCTYPE html>
Contenido Especifica la versión del tipo de documento a utilizar en este caso usamos el doctype de html5.
html
Tras la declaración del tipo de documento indicamos el inicio de nuestro documento html. Esta etiqueta se
cierra cuando finalizamos el documento, además posee un atributo “lang” el cual sirve para indicar el
idioma del documento
Página 2 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
head
Esta etiqueta indica que es la cabecera del documento donde colocaremos los metadatos de la página, el
código JavaScript y el CSS para darle estilos la pagina
meta charset
Es obligatorio en HTML5 el cual especifica el juego de caracteres del documento, el cual debería ser en
todas las ocasiones utf-8, como todo metadato debe ir en el head
title
Es un metadato especial que nos permite establecer el título de la página, para efectos de
posicionamiento es necesario que el valor del title sea idéntico al h1 de la pagina y a la url del sitio web
body
Dentro de esta etiqueta estableceremos todo el contenido de la pagina es decir texto, imágenes, videos
links etc.
Etiquetas comunes
H1 H2 H3 H4 H5 H6
Dentro Especifican la cabecera o títulos de las diferentes secciones o contenido de la pagina web donde la
etiqueta h1 es el titulo mas grande y h6 el titulo más puiño
<p>
Dentro Esta etiqueta nos permite crear párrafos en la página web
strong y em
Dentro Estas etiquetas permiten mostrar en negrita el contenido establecido dentro de ellas la diferentica
es que la etiqueta em no le dará tanta fuerza el texto sino mayor énfasis.
ul ol
Permite crear listas desordenadas con ul y listas ordenadas con ol. Estas listas poseen ua etiqueta interna
la cual es li que sirve para declarar cada elemento de la lista ejemplo
Página 3 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
El resultado es:
Como pudimos ver con ol la lista se crea de manera ordenada, pero no siempre es conveniente para esto
se usa la etiqueta ul función exactamente igual que las listas ordenadas, pero en vez de utilizar el
elemento ol usamos ul ejemplo:
El resultado es:
Links <a>
Link o enlaces se utilizan para enviar a otra parte del sitio web o a otra pagina externa. Un enlace se
construye con la etiqueta a y en su propiedad href especificamos a donde va a apuntar tal link
Ejemplo:
El resultado es:
Página 4 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Imágenes <img>
Esta etiqueta se usa para insertar imágenes, esta etiqueta posee la propiedad src cuyo valor indica la ruta
de la imagen a establecer y la propiedad alt para mostrar un texto alternativo ejemplo
El resultado es:
Elementos raíz
Elemento Descripción
<!doctype html> Define que el documento está bajo el estándar de HTML 5
<html> Representa la raíz de un documento HTML o XHTML. Todos los demás
elementos deben ser descendientes de este elemento.
Página 5 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Scripting
Elemento Descripción
<script> Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programación es JavaScript
<noscript> Define un contenido alternativo a mostrar cuando el navegador no soporta
scripting.
Elemento Descripción
Representa un hiperenlace, enlazando a otro recurso.
<a>
<em> Representa un texto enfatizado, como un acento de intensidad.
Página 6 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 7 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Secciones
Elemento Descripción
Página 8 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Agrupación de contenido
Elemento Descripción
Página 9 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Elemento Descripción
Página 10 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 11 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 12 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Ediciones
Elemento Descripción
Contenido Incrustado
Elemento Descripción
Página 13 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Datos tabulares
Elemento Descripción
Página 14 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
<th>
Formularios
Elemento Descripción
Página 15 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 16 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Realice consultas a través de internet sobre la importancia de las páginas web y desde su punto de vista
debata con sus compañeros porque es importante el uso de esta tecnología
Elabore una página web usando la versión 5 de html donde use las etiquetas anteriormente vistas en esta
guía
Elabore una página web donde use de manera estructurada las siguientes etiquetas
Header, section, article, h1, h2, p, hr, img, footer, div, strong,em, form, input, label, button
Elabore un pagina web de tema libre donde use las etiquetas de la versión 5 de html
Página 17 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
Página 18 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIÓN Versión: 02
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019
2. Almacenamiento de
información
Papel bond,
3. Procesamiento de Computadores
marcadores,
de escritorios,
Información hojas de Ingeniero de Ambiente de formación, sala
10 Tablet, 20 10 1
block, lápices, Sistemas. de sistema, CODESENA.
computadores
memoria
4. Salida de Información portátiles.
USB,
Página 19 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral
7. Sistemas
Transaccionales
8. Sistemas de Apoyo de
las Decisiones
9. Sistemas Estratégicos
Página 20 de 21
SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIÓN Versión: 02
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019
5. GLOSARIO DE TERMINOS
Interfaz: Dispositivo capaz de transformar las señales generadas por un aparato en señales comprensibles
por otro.
Datos: conjunto o juego de información que puede ser utilizada por un sistema de información
información,
6. REFERENTES BIBLIOGRÁFICOS
https://definicion.de/pagina-web/
https://developer.mozilla.org/es/docs/HTML/HTML5
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
Instructor Informática
Página 21 de 21