Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Nombre del
Proyecto:
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
Página 1 de 20
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 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
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
Página 2 de 20
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
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
El resultado es:
Página 3 de 20
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
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:
Imágenes <img>
Página 4 de 20
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
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.
Scripting
Elemento Descripción
Página 5 de 20
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
Representa un hiperenlace, enlazando a otro recurso.
<a>
<em> Representa un texto enfatizado, como un acento de intensidad.
Página 6 de 20
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 7 de 20
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 8 de 20
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árrafo.
Elemento Descripción
Página 9 de 20
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 10 de 20
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 20
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 12 de 20
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 13 de 20
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 14 de 20
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
Página 15 de 20
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
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
Lista de Chequeo.
Evidencias de Desempeño: Trabajo en Equipo y estrategia
utilizada.
Lista de Chequeo.
Representación en páginas web
Evidencias de Producto: para la socialización y
comprensión del mismo.
Página 16 de 20
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 17 de 20
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
3. Procesamiento de
Información
4. Salida de Información
7. Sistemas
Transaccionales
8. Sistemas de Apoyo de
Página 18 de 20
las Decisiones
9. Sistemas Estratégicos
Página 19 de 20
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
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,
5. GLOSARIO DE TERMINOS
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 20 de 20