Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Anexo S11

    Cargado por

    Percy Bernabe
    15 vistas2 páginas
    2

    Título original

    ANEXO S11

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    2

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    15 vistas2 páginas

    Anexo S11

    Cargado por

    Percy Bernabe
    2

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 2

    4° GRADO SESIÓN011 - PROYECTO- III BIMESTRE

    SESIÓN DE PROYECTO N° 11

    “Programemos con HTML insertando imágenes en texto”


    1. PROPÓSITO DE LA SESIÓN: Los estudiantes insertarán imágenes a un documentos en html
    I. APRENDIZAJES ESPERADOS:
    COMPETENCIAS CAPACIDADES INDICADORES
    Realiza los procesos de Escribe adecuadamente comandos
    programación, considerando las básicos HTML al realizar su página web.
    EJECUCIÓN DE PROCESOS normas de seguridad e higiene.

    COMPETENCIA Y  Siempre
    DIMENSIÓN  A veces.
    Aprender de los errores.  Nunca
    SOCIOEMOCIONAL:
    Perseverancia

    FICHA INFORMATIVA N° 01

    “Inserción de Imágenes con HTML”


    Para empezar a trabajar un sitio web seguramente necesitaremos insertar imágenes y para ello
    deberemos de crear una carpeta llamada “mi sitio” donde debemos de tener un archivo html
    llamado principal.html o inicio.html.

    Pues bien, crearemos otra carpeta dentro que se llamará “imagenes“, donde irán las imágenes
    de nuestra página. Por último, introducimos en ella una imagen que tengamos a mano.

    imagenes fondito.jpg
    MI SITIO inicio.html playa.jpg
    sobre_mi.html logo.jpg

    Ahora lo tenemos todo bien organizado en un mismo directorio

    1º Etiqueta <img />


    Lo primero es utilizar la etiqueta <img />, la etiqueta img está vacía lo que quiere decir que no
    necesita una etiqueta de cierre.

    2º Atributo src
    Le añadimos el atributo src, sería la URL donde podemos encontrar la imagen.

    <img src=”URL de la imagen”/>

    <body>
    <p>Mirad que imagen más bonita:</p>
    <img src="imagenes/playa.jpg" alt="Arena de playa en un
    día soleado" />
    <p>Ójala estuviera en un sitio así ahora mismo</p>
    </body>
    1
    4° GRADO SESIÓN011 - PROYECTO- III BIMESTRE

    3º Atributo alt

    Ahora pondremos el atributo alt, con éste atributo estaremos especificando un texto alternativo
    para el caso de que la imagen no cargue.
    Asimismo si pasamos el cursor sobre la imagen también nos aparecerá dicho texto pero sólo si
    utilizas Internet Explorer, si usas Chrome, Firefox etc entonces además tendrás que añadir
    el atributo title como en el ejemplo:

    <img src=”URL de la imagen” alt=”texto alternativo” title=”texto


    alternativo”/>
    Lo recomendable es añadir ambos atributos porque no sabemos con que navegador accederán
    para visualizar la imagen.

    4º Atributos height y width (alto y ancho)


    Ahora puedes especificar el tamaño de la imagen, para esta ocasión usaremos los atributos
    height y width.
    Ten en cuenta que con estos atributos sólo cambiarás el tamaño con el que se mostrará la
    imagen pero no reducirás el peso de la misma.
    Mi consejo es optimizar la imagen antes de subirla a tu blog o sitio web con programas
    como Jpeg Optimizer.

    <img src=”URL de la imagen” alt=”texto alternativo” title=”texto


    alternativo” width=”250” height=”80”/>
    La imagen que aparezca tendrá 250 pixeles de ancho por 80 pixeles de alto.

    FICHA DE TRABAJO N° 01
    1. Crea una carpeta con el nombre del tema para su sitio web y dentro de ella una subcarpeta llamada
    imágenes.
    2. Inserta una imagen del tamaño de 300 por 250 y guárdala con el nombre de trabajo_magen1.html en la
    carpeta creada.
    3. Crea una tabla de 2 X 2 de 200 px por 100 px cada celda e inserta una imagen del mismo tamaño en
    cada celda y guárdala con el nombre de trabajo_imagen2.html en la carpeta creada

    INSTRUMENTO DE AUTOEVALUACIÓN – Sesión 11

    Habilidad socioemocional a evaluar: ADAPTACIÓN AL CAMBIO


    Desempeño Dimensión: Aprender de los errores.
    Siempre A veces Nunca Ejemplo de lo que hice hoy
    Reconoce que el error es parte
    del aprendizaje, toma riegos y
    extrae aprendizajes concretos.

    También podría gustarte