programación en html 4
TRANSCRIPT
![Page 1: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/1.jpg)
PROGRAMACIÓN EN HTML
Capítulo 4:Imágenes
Material desarrollado por el profesor Luis Carlos Flórez ToroImagen tomada de : www.mastermagazine.info
![Page 2: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/2.jpg)
RepasoEn la clase anterior vimos cómo modificar el estilo de la fuente a través del atributo style.Miremos un ejemplo para recordar como funciona:
Imagen tomada de http://formaciondevendedoresempresarios.blogspot.com
<body>
<p style=“font-family:serif; color:red”> Come manzanas </p>
</body>
En la clase de hoy veremos como incluir imágenes en nuestras páginas web, ¡bienvenidos!
![Page 3: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/3.jpg)
ImágenesLa etiqueta <img> se usa para insertar imágenes, su sintaxis es la siguiente:
src viene de SOURCE y significa fuente o lugar de donde se toma la imagen
<img src=“dirección web de la imagen”>
La etiqueta <img> no necesita etiqueta de cierre </img>
Ejemplo:
<img src=“http://www.clker.com/cliparts/h/m/D/l/m/m/escudo-2.svg”>
![Page 4: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/4.jpg)
¿Cómo obtener la dirección de la imagen?
1. Ingresas a google imágenes y buscas la imagen que necesitas
![Page 5: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/5.jpg)
¿Cómo obtener la dirección de la imagen?
2. Seleccionas la imagen que deseas y eliges VER IMAGEN ORIGINAL
Si estás navegando con Internet Explorer la opción aparece como “Tamaño completo”
![Page 6: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/6.jpg)
¿Cómo obtener la dirección de la imagen?
3. Cuando aparezca la imagen sola en pantalla, copias la URL que aparece; esa es la que te sirve.
![Page 7: Programación en html 4](https://reader038.vdocuments.mx/reader038/viewer/2022102807/55be133bbb61eb7f708b459c/html5/thumbnails/7.jpg)
ACTIVIDAD 61. Abre el documento htm de
la clase anterior en bloc de notas.
2. Escribe en una lista ordenada un top tres de un tema que te guste, a través de imágenes. (el resultado debe ser similar al que se muestra en esta ventana)
¡Muchos éxitos!