Scribd Logo
Upload

Welcome to Scribd!

  • GFPI-F-019 Formato Guia de Aprendizaje HTML

    Uploaded by

    Daviid Santana
    92 views10 pages
    luis

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    luis

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    92 views10 pages

    GFPI-F-019 Formato Guia de Aprendizaje HTML

    Uploaded by

    Daviid Santana
    luis

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    SERVICIO NACIONAL DE APRENDIZAJE SENA

    SISTEMA INTEGRADO DE GESTIN Versin: 02


    Procedimiento Ejecucin de la Formacin Profesional
    Integral Cdigo: GFPI-F-019
    GUA DE APRENDIZAJE

    GUA DE APRENDIZAJE N
    003

    1. IDENTIFICACIN DE LA GUIA DE APRENDIZAJE


    Programa de Formacin: Cdigo: 228106 ANALISIS Y DESARROLLO DE
    Versin: 102 SISTEMAS DE INFORMACION
    DISEAR UN SOFTWARE QUE
    PERMITA OPTIMIZAR LOS PROCESOS
    Nombre del Proyecto: Y FACILITAR EL MANEJO DEL
    Cdigo:
    SISTEMA DE RIEGO EN CULTIVOS DE
    LEGUMINOSAS HORTICULAS EN EL
    CENTRO BITECNOLOGICO.

    Fase del proyecto: DISEO

    Actividad (es) Ambiente MATERIALES DE


    de de FORMACIN
    Aprendizaje: formacin DEVOLUTI CONSUMI
    Actividad (es) del ESCENARI VO BLE
    Proyecto: DISEO WEB : O (Aula, (Herrami (unidades
    CONCEPTOS, Laborator enta - empleada
    CARACTERSTICAS, io, taller, equipo) s durante
    unidad el
    DISEO DE
    DISEA LA ARQUITECTURA DE productiv programa
    INTERFAZ. Equipos de
    SOFTWARE DEL SISTEMA DE a) y )
    INFORMACIN, QUE CUMPLA elemento
    sy Cmputo. Fotocopias
    CON
    condicion Marcadore
    LAS NECESIDADES DE LA
    es de s
    ORGANIZACIN, UTILIZANDO LA
    seguridad
    METODOLOGA ORIENTADA A industrial,
    OBJETOS, salud
    MEDIANTE HERRAMIENTAS ocupacio
    TECNOLGICAS nal y
    medio
    ambiente
    Resultados de Competencia:
    Aprendizaje:
    DISEAR EL
    DISEAR LA ARQUITECTURA SISTEMA DE
    DEL SOFTWARE, MEDIANTE LA ACUERDO CON
    INTERPRETACIN DE LAS LOS REQUISITOS
    CLASES, OBJETOS Y DEL CLIENTE
    MECANISMOS DE
    COLABORACIN, UTILIZANDO
    HERRAMIENTASTECNOLGICAS
    Pgina 1 de 10
    SERVICIO NACIONAL DE APRENDIZAJE SENA
    GUA DE APRENDIZAJE Versin: 02
    SISTEMA INTEGRADO DE GESTIN
    Proceso Gestin de la Formacin Profesional Integral Cdigo: GFPI-F-019
    Procedimiento Ejecucin de la Formacin Profesional Integral

    DE DISEO, DE ACUERDO
    CON LAS TENDENCIAS DE LAS
    TECNOLOGAS DE LA
    INFORMACIN Y LA
    COMUNICACIN.
    Resultados de Aprendizaje: Competencia:

    Resultados de Aprendizaje: Competencia:

    Duracin de la gua ( en 48 hras.


    horas):

    HTML es el lenguaje ms bsico para la creacin de pginas web. Es usado para definir
    la estructura y el contenido en forma de texto y complementar el texto de pginas web con
    imgenes, tablas y formularios. HTML se escribe en forma de etiquetas, rodeadas por
    corchetes angulares ().

    2. INTRODUCCIN

    3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

    3.1 Actividades de Reflexin inicial.

    Ocupa tu lugar Aprendiz Sena

    El propsito del juego es desarrollar mecanismos de coordinacin y trabajo colaborativo,


    valorando la importancia de desarrollar estrategia claras para lograr una meta u objetivo .

    Objetivos:

    a) Desarrollar mecanismos de coordinacin y trabajo colaborativo.


    b) Valorar la importancia de desarrollar estrategias claras para lograr un objetivo.

    Pgina 2 de
    10
    3.2 Actividades de contextualizacin e identificacin de conocimientos
    necesarios para el aprendizaje.)

    La estructura bsica de una pgina HTML es:

    Una pgina HTML es un archivo que generalmente tiene como extensin los caracteres html. Por
    ejemplo podemos llamar a nuestra primer pgina con el nombre: pagina1.html

    Estos son los elementos bsicos que toda pgina HTML debe llevar:

    Lo primero es el DOCTYPE que informa al navegador que el contenido siguiente se trata de un


    archivo HTML (todos los navegadores modernos analizan la presencia del DOCTYPE)

    Luego contina con la marca:<html> y finaliza con la marca:</html> al final del archivo.

    Elementos que contiene el <head>

    Todo lo que coloquemos entre las etiquetas <head> y </head>, aunque no se visualiza
    en el navegador, ofrece informacin importante sobre la propia pgina, por lo que en
    el <head> se introduce informacin referente a:

    a) La codificacin de la pgina (para que aparezcan smbolos como la "", "" o los
    acentos correctamente) utilizando meta charset="utf-8".
    b) El ttulo de la pgina, que aparece en la pestaa del navegador (utilizando <title>).
    c) La descripcin de la pgina, informacin destinada bsicamente a los bscadores
    Pgina 3 de
    10
    (Google, Bing o Yahoo entre otros).
    <meta name="description" content="Resumen del contenido de la pgina">
    Otras etiquetas del Head

    <head>

    <meta name="author" content="Arlenys Nieves">


    <meta name="description" content="ADSI programa de sistemas">
    <meta name="keywords" content="Sistemas, Electronica, arduino, board">

    </head>

    Salto de lnea: <br>

    Para indicarle al navegador que queremos que contine en la prxima lnea debemos
    hacerlo con el elemento HTML <br>.
    Cuando aparece la marca <br> el navegador contina con el texto en la lnea siguiente.
    Es uno de los pocos elementos HTML que no tiene marca de cerrado.

    Ejemplo:

    <html>
    <head>
    <title> LA VIDA ES BELLA </title>
    <meta charset="utf-8">
    </head>
    <body>
    <H1> LA INTELIGENCIA </H1>
    <P>Te espero cuando la noche se haga da,<br>
    suspiros de esperanzas ya perdidas. <br>
    No creo que vengas, lo s,
    s que no vendrs. <br>
    S que la distancia te hiere,
    s que las noches son ms fras, <br>
    S que ya no ests.
    Creo saber todo de ti. </P>
    </body>
    </html>

    Lista ordenada (<ol>)

    Este elemento HTML es til cuando debemos numerar o listar una serie de objetos.

    Pgina 4 de
    10
    a) <ol> viene de las palabras ordered list
    b) <li> viene de las palabras list item

    Ejemplo:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>ADSI SENA</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>Nombres de Animales</h1>
    <ol>
    <li>Leon</li>
    <li>Tigre</li>
    <li>Gato</li>
    </ol>
    </body>
    </html>

    Lista no ordenada (<ul>)

    Una lista no ordenada como su nombre lo indica no utiliza un nmero delante de cada
    items sino un pequeo smbolo grfico.

    a) <ul> viene de las palabras unordered list


    b) <li> viene de las palabras list item

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>ADSI SENA</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>Nombres Femenino</h1>
    <ul>
    <li>Ana</li>
    <li>Carme</li>
    <li>Maria</li>
    </ul>
    </body>
    </html>

    3.3 Actividades de apropiacin del conocimiento (Conceptualizacin

    Pgina 5 de
    10
    y Teorizacin).

    Imgenes dentro de una pgina <img>

    Para insertar una imagen dentro de una pgina debemos utilizar el elemento HTML
    <img>, la misma no tiene una marca de finalizacin. Los formatos clsicos son los
    archivos con extensiones gif, jpg y png..

    La sintaxis de esta marca es:

    <img src="adsi.jpg" alt="grupo de sistemas">

    I. En la propiedad src indicamos el nombre del archivo que contiene la imagen.


    II. Otra propiedad muy recomendada es alt, donde disponemos un texto que vern
    los usuarios que visiten el sitio con un navegador que slo permite texto (o con un
    navegador que tenga desactivada la opcin de descarga de imgenes). El texto
    debe describir el contenido de la imagen.

    a) <img> viene de la palabra image


    b) src viene de de la palabra source
    c) alt viene de la palabra alternative

    Ejemplo:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Uso de imagines</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>Sistemas</h1>
    <img src="foto1.jpg" alt="Sistemas" width="200">

    <p>Quedo muy bien...</p>


    <img src="foto2.jpg"alt="carro" width="200">
    <p>quedo major ...</p>
    </body>
    </html>

    Pgina 6 de
    10
    3.4 Actividades de transferencia del conocimiento.

    1. Problema: Confeccionar una pgina que muestre los nombres de 5 lenguajes de


    programacin separados por un guin.
    2. Que significan las siguientes etiquetas y dar tres ejemplos:
    a) Prrafo <p>
    b) Ttulos <h1><h2><h3><h4><h5><h6>

    3). Crear una pgina HTML que se vea as:

    4). Confeccione una lista ordenada con los tres paises con mayor poblacin del planeta.
    Disponer un ttulo de segundo nivel y debajo de la lista la suma de habitantes de esos
    tres paises enfatizado.

    5). Desarrollar tres pgina que muestre imgenes con titulos, subtitulos y contenido.

    6). Que es Hipervnculos.

    7). Crear pginas con hipervnculos.

    3.5 Actividades de evaluacin.

    Pgina 7 de
    10
    Evidencias de Criterios de Evaluacin Tcnicas e Instrumentos
    Aprendizaje de Evaluacin

    Evidencias de Estructura, Diseo de


    Conocimiento : Presentacin y Diseo de
    Navegacin de la pgina
    HTML)

    Lista de Chequeo.
    Evidencias de
    Desempeo:

    Evidencias de
    Producto: x

    4. RECURSOS PARAdeEL
    Materiales APRENDIZAJE
    formacin
    Materiales de formacin
    devolutivos: Talento Humano (Instructore
    (consumibles)
    (Equipos/Herramientas)

    ACTIVIDADES DURACI
    DEL N
    PROYECTO (Horas)
    Descripcin Cantidad Descripcin Cantidad Especialidad Cant

    Pgina 8 de
    10
    Href: Marca de enlace usada en HTML para designar la direccin de destino del enlace.
    HTML: Hypertext Marckup Language. Lenguage de formato empleado para elaborar
    pags web. Se utiliza para especificar la apariencia de la pag en pantalla. Tambin puede
    incluir enlaces hipertexto, imgenes, sonidos y applets en una pag.
    HTTP: Hypertext Transport Protocol. Protocolo para mover archivos de hipertexto a
    travs de Internet. Requiere un programa cliente HTTP en un extremo y un programa
    servidor HTTP en el otro.
    Cliente: Programa que se usa para contactar y obtener datos de un programa servidor
    localizado en otro ordenador, a menudo a gran distancia. Cada programa cliente est
    diseado para trabajar con uno o ms tipos de programas servidores especficos y cada
    servidor requiere un tipo especial de cliente.
    Conexin: Circuito virtual de transporte que se establece entre dos programas de
    aplicacin con fines comunicativos.
    Contrasea: Password. Palabra o cadena de caracteres, normalmente secreta, para
    accedera a travs de una barrera. Se usa como herramienta de seguridad para identificar
    usuarios de una aplicacin, archivo, o red.
    Cookies: Pequeo trozo de datos que entrega el programa servidor de HTTP al
    navegador WWW para que ste lo guarde. Normalmente se trata de informacin sobre la
    conexin o los datos requeridos; de esta manera puede saber que hizo el usuario en la
    ltima visita.

    5. GLOSARIO DE TERMINOS

    6. REFERENTES BIBLIOGRFICOS

    Pgina 9 de
    10
    1) https://adegiusti.files.wordpress.com/2013/09/el-gran-libro-de-
    html5-css3-y-javascript.pdf
    2) http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-
    html.pdf

    7. CONTROL DEL DOCUMENTO (ELABORADA POR)

    Arlenys Carolina Nieves

    Ingeniera de Sistemas

    Instructora

    Sena - CBC

    Pgina 10 de
    10

    You might also like