0 F004-P006-Gfpi Guia de Aprendizaje Analisis HTML

GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
PROCEDIMIENTO DESARROLLO CURRICULAR

GUÍA DE APRENDIZAJE
1. IDENTIFICACIÓN DE LA GUIA DE APRENIZAJE
 Denominación del Programa de Formación: PROGRAMACIÓN DE SOFTWARE

 Código del Programa de Formación: 228120 - Versión: 102
 Nombre del Proyecto: DESARROLLO DE UNA APLICACIÓN PARA REGISTRO Y CONTROL DE
PROCESOS OPERATIVOS EN EMPRESAS DE MANIZALES
 Fase del Proyecto: Análisis
 Actividad de Proyecto: ANALIZAR LOS DIFERENTES ALGORITMOS Y PROGRAMAS, PARA
OPTIMIZAR EL DISEÑO.
 Competencia: (220501032): ANALIZAR LOS REQUISITOS DEL CLIENTE PARA CONSTRUIR EL
SISTEMA DE INFORMACION.
 Resultados de Aprendizaje Alcanzar: INTERPRETAR EL DIAGRAMA PARA IDENTIFICAR EL MODELO
DE DATOS
 Duración de la Guía: 40 HORAS.
2. PRESENTACION
Diseñando con HTML vas a ser tu el dueño de toda tu página y podrás crear cualquier cosa que te
propongas. Conseguir. Sólo tendrás que conocer bien el lenguaje y aplicarlo como sabes.
Además, si esto te parece poco, en el futuro, cuando quieras mejorar tu página con JavaScript, ASP u otras
tecnologías web, vas a necesitar saber bastante HTML y tener soltura al escribirlo para que el nuevo
lenguaje no se te atragante. HTML es fácil, pero otras cosas que vienen por detrás no lo son tanto y, si no
sabes las bases (HTML), no vas a tener ninguna facilidad.
3. FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE
 Descripción de la(s) Actividad(es): ELABORAR LOS DIFERENTES ALGORITMOS PROPUESTO,

APLICANDO PROCEDIMIENTOS TECNOLOGICOS Y COMPILARLOS EN EL SOFTWARE QUICK SCRIPT
 Ambiente Requerido: (Aula con equipos de cómputo, conexión a Internet y software requerido).
 Materiales: DEVOLUTIVO - (Herramienta - equipo)
Computadores, Memoria RAM: 4 gigas DR3- Procesador: AMD doble núcleo- Disco Duro: 640
gigas- Monitor: 20 pulgadas. SOFTWARE: (ARGOS UML - QUICK SCRIP - Dreamweaver- PHP -
APACHE - POSTGRESQL - MYSQL)
GFPI-F-019 V3
SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
Actividades de Desarrollo:
Definiéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las páginas web a las que se
accede mediante internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría
de páginas web.
Los diseñadores utilizan el lenguaje HTML para crear páginas web, los programas que se emplean generan
páginas escritas en HTML y los navegadores que utilizamos (por ejemplo Google Chrome, Opera o Mozilla
Firefox) muestran las páginas web después de leer e interpretar su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño de páginas web, es
muy fácil de entender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText
Markup Language y más adelante se verá el significado de cada una de estas palabras. El lenguaje HTML es
un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro
llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar
reconocido por todas las empresas relacionadas con el mundo de internet, una misma página escrita en
HTML se visualizará de forma muy similar en cualquier navegador bajo distintos sistemas
operativos.Actividades de conocimiento.
3.1 ESTRUCTURA DE UNA DOCUMENTO HTML
Un documento HTML, no es mas que el texto entre las etiquetas:
<HTML>
……..
</HTML>
El documento HTML se compone de dos partes:
<HTML>
<HEAD> Cabecera del documento
</HEAD>
<BODY>
</BODY>
</HTML>
HEAD: Es la cabecera del documento, es información que no se ve en la pantalla principal y que contiene
características del documento, se inicia mediante el comando <HEAD> y se termina con </HEAD>. El titulo
del documento se declara entre las etiquetas <TITLE> y </TITLE>, este titulo debe ser breve y descriptivo
de acuerdo a su contenido, pues es la que se visualiza en la pestaña del navegador.
BODY: Es el cuerpo del documento, lo que visualiza en el navegador. Se inicia mediante el comando
<BODY> y </BODY>, dentro de estas dos etiquetas se incluye cualquier carácter imprimible.
ATRIBUTOS DE LA ETIQUETA BODY
BGCOLOR
Parámetro que se usa para el color de fondo de la página, el color se define en base hexadecimal, con una
gama de colores RGB, con una combinación de 6 dígitos, cada combinación hace referencia a un color.
También se pueden usar los nombres de los colores en inglés.
Sintaxis
EJERCICIO 1
<HTML>
<HEAD Cabecera del documento
</HEAD>
TEXT
Parametro usado para definir el color del texto, el formato es parecido al de bgcolor, pero si no se define
nada, el texto será de color negro por defecto.
Sintaxis:
EJERCICIO 2
<HTML>
</HEAD>
BACKGROUND
Este parámetro se usa para especificar la una URL (Ruta y nombre de archivo) de la imagen que será usada
de fondo. Los formatos que habitualmente se usan son: GIF, JPG o PNG. De acuerdo al tamaño de la
imagen seleccionada la imagen se verá como mosaico o cubre toda la zona de visualización.
TIP: Poner una imagen pequeña y dejar que se repite,

permite que la pagina se cargue mas rápido.
Sintaxis:
EJERCICIO 3
<HTML>
</HEAD>
MARGIN:
Se pueden definir las márgenes de la página web por medio de estos comandos, para que el texto no
quede muy pegado al borde de la página, se pueden definir: “Leftmargin” para margen izquierdo,
“topmargin” Margen superior, “Rightmargin” para la margen de la derecha y “bottommargin” para el
margen inferior.
Sintaxis:
EJERCICIO 4
<HTML>

Tomando
como </HEAD>
referencia
la
planeación
pedagógica y las orientaciones para elaborar guías de aprendizaje citado en la guía de desarrollo curricular
Las siguientes son las etiquetas para comenzar a dar formato al texto. Las etiquetas que
se escriben envuelven la palabra o el texto deseado aplicando el formato aplicado por
medio de las etiquetas HTML:
TIP: Las etiquetas obsoletas son etiquetas que no se usan

en HTML
Las etiquetas deben rodear el texto, es decir que las etiquetas deben abrirse y cerrarse:
Ejemplo:
<b>este texto aparecerá en negrita</b>
También se pueden combinar las etiquetas:
Ejemplo:
<b><i>este texto aparecerá en negrita y en cursiva</i></b>

EJERCICIO 1:
<HTML>
<HEAD><TITLE>Letra en negrita</TITLE>
</HEAD>
<BODY>
EJERCICIO 2:
<HTML>
<HEAD><TITLE>Letra en cursiva</TITLE>
</HEAD>
<BODY>
EJERCICIO 3:
<HTML>
<HEAD><TITLE>Letra con subrayado</TITLE>
</HEAD>
<BODY>
EJERCICIO 4:
<HTML>
<HEAD><TITLE>Letras Grandes y pequeñas</TITLE>
</HEAD>
<BODY>
EJERCICIO 5:
<HTML>
<HEAD><TITLE>Subindice y Superindice</TITLE>
</HEAD>
<BODY>
EJERCICIO 6:
<HTML>
<HEAD><TITLE> Letra con tachado</TITLE>
</HEAD>
<BODY>
Se puede tachar una palabra <strike>así de fácil</strike>

Elabore el siguiente ejercicio:
TAMAÑO DEL TEXTO:
Para modificar el tamaño del texto se utiliza el atributo SIZE con la etiqueta <FONT>, se
definen diferentes tamaños, de 1 a 6.
Ejemplo:
<FONT SIZE=”4”> El texto en tamaño 4</FONT>
EJERCICIO 7:
<HTML>
<HEAD><TITLE> Tamaño de texto </TITLE>
</HEAD>
<BODY>
COLOR DEL TEXTO
Para dar color a un texto se utiliza el siguiente comando:
<FONT COLOR=”00ffgh”> EJEMPLO DE UN TEXTO CON COLOR</FONT>
TIP: Los valores de los colores se expresan en valores

haxadecimales
ENCABEZADOS:
HTML dispone de seis cabeceras o tipos de letras definidos de distinto tamaño que se utilizan
para marcar los títulos en la paginas y se denominan así, siendo 1 el tamaño mayor:
Los títulos de encabezado requieren la marca de fin y siempre provocan un salto de línea
aunque esta no se indique.
EJERCICIO 8:
PARRAFOS
Para indicarle al navegador que se quiere un párrafo, se debe especificar entre las etiquetas
<p> y </p>, de esta manera que el texto separado por una margen en blanco por encima y
uno por debajo.
Los párrafos o el texto se puede alinear haciendo uso de la etiqueta <ALIGN>
EJERCICIO 8:
<HTML>
<HEAD>
4.
<TITLE>Ejemplo alineación de párrafos</TITLE>
</HEAD>
ACTIVIDADES DE EVALUACIÓN
Tome como referencia las técnicas e instrumentos de evaluación citados en la guía de Desarrollo
Curricular
Técnicas e Instrumentos de
Evidencias de Aprendizaje Criterios de Evaluación
Evaluación
Evidencias de Conocimiento : Representa procesos del

sistema a partir de la
-Reconocer el software construcción de algoritmos, Instrumentos: Lista de chequeo.
apropiado para realizar las como parte de la solución a
primeras plantillas de HTML. situaciones planteadas,
utilizando lenguajes de
programación O.O
Evidencias de Desempeño: Técnicas: Valoración de producto

Traduce un problema a una
Manejo técnico de las solución por medio de Instrumentos: Lista de chequeo
herramientas, menú, entre otras seudocódigo
y manejo correcto de estas
Evidencias de Producto: Representa procesos del 1. Ejercicio Prácticos

sistema a partir de la
Resuelve ejercicios de algoritmos construcción de algoritmos,
sencillos, secuenciales,
estructurales y ciclos. páginas WEB, sencillas con
código HTML
Aplica correctamente los
conceptos de algoritmos,
problema dado, problema
solucionado. Solución (ejercicios
prácticos de algoritmia y HTML).
5. GLOSARIO DE TERMINOS
Elemento Descripción
<body>
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un

documento.
<section> This element has been added in HTML5 Define una sección en un documento.
<nav> This element has been added in HTML5 Define una sección que solamente contiene enlaces de
navegación
<article> This element has been added in HTML5 Define contenido autónomo que podría existir
independientemente del resto del contenido.
<aside> This element has been added in HTML5 Define algunos contenidos vagamente
relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá
teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elemento de cabecera implementan seis niveles de

cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de
cabecera describe brevemente el tema de la sección que introduce.
<header> This element has been added in HTML5 Define la cabecera de una página o sección.
Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer> This element has been added in HTML5 Define el pie de una página o sección. Usualmente
contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar
información de retroalimentación.
<address> Define una sección que contiene información de contacto.
<main>This element has been added in HTML5 Define el contenido principal o importante en el
documento. Solamente existe un elemento <main> en el documento.
Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.
<hr> Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre> Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote> Representa una contenido citado desde otra fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista ennumerada.
<dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.
<dd> Representa la definición de los terminos listados antes que él.

<figure> This element has been added in HTML5 Representa una figura ilustrada como parte del
documento.
<figcaption> This element has been added in HTML5 Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin ningún significado especial.
6. REFERENTES BILBIOGRAFICOS
Documentos:
 AGUDELO MONTOYA, CLAUDIA LILIANA. ¿Cómo se hace un ensayo? 1996. P. 3
 OJEDA R., HERMES. La importancia de la Teoría de Algoritmos en el Desarrollo de Software. P. 4
 FRANCO LÓPEZ, MARGARITA MARÍA. Manual Básico de instrucciones y comandos SMART DFD 1.0. P.
10
 SCHMULLER, JOSEPH. Manual UML. Aprendiendo UML en 24 horas. Prentice Hall. 1997. 404 p.
 R. IZQUIERDO, LUIS. Introducción a la Programación orientada a objetos. 13 p.
Cibergrafía:
 Programación en Castellano – Algoritmos. http://www.programacion.com/algoritmos
 Lógica de Programación. http://cadetparners.galeon.com/aficiones1770322.html
 Wikipedia – Algoritmo. http://es.wikipedia.org/wiki/Algoritmo
QUISPE-OTAZU, RODOLFO. ¿Qué es un Algoritmo? Blog de Rodolfo Quispe-Otazu [Internet]. Marzo 2007.
Disponible en: http://www.rodolfoquispe.org/blog/que-es-un-algoritmo.php
 http://www.programacion.com
 http://kataix.umag.cl/~ruribe/Utilidades/Introduccion%20a%20la%20Programacion%
20Orientada%20a%20Objetos.pdf
 http://www.monografias.com/trabajos67/diagramas-uml/diagramas-uml.shtml
 Bases de datos 1 – Apuntes 2006 – 07
http://www.alu.ua.es/j/jmr36/Conectate/Base%20Datos/Apuntes2006.pdf
 Software libre. http://www.uoc.edu/masters/oficiales/img/913.pdf

 http://luis.izqui.org/resources/ProgOrientadaObjetos.pdf
 Modificadores de acceso. http://elvex.ugr.es/decsai/java/pdf/9D-access.pdf
7. CONTROL DEL DOCUMENTO
Nombre Cargo Dependencia Fecha
Autor (es) Carlos Andrés Loaiza Rendón Instructor Febrero 2018
8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)
Nombre Cargo Dependencia Fecha Razón del Cambio
Autor (es)

0 F004-P006-Gfpi Guia de Aprendizaje Analisis HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

0 F004-P006-Gfpi Guia de Aprendizaje Analisis HTML

Enviado por

Direitos autorais:

Formatos disponíveis

GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

PROCEDIMIENTO DESARROLLO CURRICULAR

1. IDENTIFICACIÓN DE LA GUIA DE APRENIZAJE

 Denominación del Programa de Formación: PROGRAMACIÓN DE SOFTWARE

3. FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE

 Descripción de la(s) Actividad(es): ELABORAR LOS DIFERENTES ALGORITMOS PROPUESTO,

3.1 ESTRUCTURA DE UNA DOCUMENTO HTML

Un documento HTML, no es mas que el texto entre las etiquetas:

El documento HTML se compone de dos partes:

<HEAD> Cabecera del documento

ATRIBUTOS DE LA ETIQUETA BODY

<HEAD Cabecera del documento

<HEAD> Cabecera del documento

TIP: Poner una imagen pequeña y dejar que se repite,

<HEAD> Cabecera del documento

<HEAD> Cabecera del documento

TIP: Las etiquetas obsoletas son etiquetas que no se usan

<b>este texto aparecerá en negrita</b>

También se pueden combinar las etiquetas:

<b><i>este texto aparecerá en negrita y en cursiva</i></b>

<HEAD><TITLE>Letra con subrayado</TITLE>

<HEAD><TITLE>Letras Grandes y pequeñas</TITLE>

<HEAD><TITLE> Letra con tachado</TITLE>

Se puede tachar una palabra <strike>así de fácil</strike>

Elabore el siguiente ejercicio:

TAMAÑO DEL TEXTO:

<FONT SIZE=”4”> El texto en tamaño 4</FONT>

<HEAD><TITLE> Tamaño de texto </TITLE>

COLOR DEL TEXTO

Para dar color a un texto se utiliza el siguiente comando:

<FONT COLOR=”00ffgh”> EJEMPLO DE UN TEXTO CON COLOR</FONT>

TIP: Los valores de los colores se expresan en valores

Los párrafos o el texto se puede alinear haciendo uso de la etiqueta <ALIGN>

Evidencias de Conocimiento : Representa procesos del

Evidencias de Desempeño: Técnicas: Valoración de producto

Evidencias de Producto: Representa procesos del 1. Ejercicio Prácticos

Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elemento de cabecera implementan seis niveles de

<address> Define una sección que contiene información de contacto.

<p> Define una parte que debe mostrarse como un párrafo.

<blockquote> Representa una contenido citado desde otra fuente.

<ol> Define una lista ordenada de artículos.

<ul> Define una lista de artículos sin orden.

<li> Define un artículo de una lista ennumerada.

<dt> Representa un término definido por el siguiente <dd>.

<dd> Representa la definición de los terminos listados antes que él.

<div> Representa un contenedor genérico sin ningún significado especial.

 Software libre. http://www.uoc.edu/masters/oficiales/img/913.pdf

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autor (es) Carlos Andrés Loaiza Rendón Instructor Febrero 2018

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

Nombre Cargo Dependencia Fecha Razón del Cambio

Você também pode gostar