SlideShare una empresa de Scribd logo
1 de 7
PROGRAMACIÓN EN
HTML
Repaso
En 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!
 Imágenes
La 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”>
 ¿Cómo obtener la dirección de la imagen?
1. Ingresas a google  imágenes y buscas la imagen que necesitas
 ¿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”
 ¿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.
ACTIVIDAD 6
1. 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!

Más contenido relacionado

La actualidad más candente

Sitio web (html) ejemplos 01
Sitio web (html) ejemplos 01Sitio web (html) ejemplos 01
Sitio web (html) ejemplos 01Emerson Garay
 
Sitio web (boostrap carrusel de imagenes)
Sitio web (boostrap carrusel de imagenes)Sitio web (boostrap carrusel de imagenes)
Sitio web (boostrap carrusel de imagenes)Emerson Garay
 
Apuntes blogs
Apuntes blogsApuntes blogs
Apuntes blogsfidd0
 
Trabajo practico nº10
Trabajo practico nº10Trabajo practico nº10
Trabajo practico nº10Vicky Serrano
 
Sigil convertir doc con imágenes 02
Sigil convertir doc con imágenes 02Sigil convertir doc con imágenes 02
Sigil convertir doc con imágenes 02curuena
 
Como insertar una_imagen_en_eclipse
Como insertar una_imagen_en_eclipseComo insertar una_imagen_en_eclipse
Como insertar una_imagen_en_eclipseEsmeralda Salvador
 
Sigil convertir doc sin imágenes 01
Sigil convertir doc sin imágenes 01Sigil convertir doc sin imágenes 01
Sigil convertir doc sin imágenes 01curuena
 
Como compartir una presentación en Internet
Como compartir una presentación en InternetComo compartir una presentación en Internet
Como compartir una presentación en Internetciudadania0910
 
Instrucciones Slideshare
Instrucciones SlideshareInstrucciones Slideshare
Instrucciones Slideshareefmarcillo1977
 

La actualidad más candente (14)

Sitio web (html) ejemplos 01
Sitio web (html) ejemplos 01Sitio web (html) ejemplos 01
Sitio web (html) ejemplos 01
 
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
 
Sitio web (boostrap carrusel de imagenes)
Sitio web (boostrap carrusel de imagenes)Sitio web (boostrap carrusel de imagenes)
Sitio web (boostrap carrusel de imagenes)
 
Apuntes blogs
Apuntes blogsApuntes blogs
Apuntes blogs
 
Tutorial slideboom
Tutorial slideboomTutorial slideboom
Tutorial slideboom
 
Mejora tu blog
Mejora tu blogMejora tu blog
Mejora tu blog
 
Trabajo practico nº10
Trabajo practico nº10Trabajo practico nº10
Trabajo practico nº10
 
HTML
HTMLHTML
HTML
 
Sigil convertir doc con imágenes 02
Sigil convertir doc con imágenes 02Sigil convertir doc con imágenes 02
Sigil convertir doc con imágenes 02
 
Como insertar una_imagen_en_eclipse
Como insertar una_imagen_en_eclipseComo insertar una_imagen_en_eclipse
Como insertar una_imagen_en_eclipse
 
Sigil convertir doc sin imágenes 01
Sigil convertir doc sin imágenes 01Sigil convertir doc sin imágenes 01
Sigil convertir doc sin imágenes 01
 
Como compartir una presentación en Internet
Como compartir una presentación en InternetComo compartir una presentación en Internet
Como compartir una presentación en Internet
 
Blog
BlogBlog
Blog
 
Instrucciones Slideshare
Instrucciones SlideshareInstrucciones Slideshare
Instrucciones Slideshare
 

Destacado

Programación en html 2
Programación en html 2Programación en html 2
Programación en html 2luchopaisa
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1luchopaisa
 
Programación en html 3
Programación en html 3Programación en html 3
Programación en html 3luchopaisa
 
Teoria de operaciones básicas
Teoria de operaciones básicasTeoria de operaciones básicas
Teoria de operaciones básicasmales11
 
FORMATOS EN EXCEL
FORMATOS EN EXCELFORMATOS EN EXCEL
FORMATOS EN EXCELperruana11
 
Tipos de datos
Tipos de datosTipos de datos
Tipos de datosperruana11
 
Creación de gráficas
Creación de gráficasCreación de gráficas
Creación de gráficasperruana11
 
Filas columnas y celdas etc
Filas columnas y celdas etcFilas columnas y celdas etc
Filas columnas y celdas etcperruana11
 
Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTMLrogeliotapia
 
Ejercicios de HTML
Ejercicios de HTMLEjercicios de HTML
Ejercicios de HTMLAbrirllave
 
Ejercicios Basicos HTML
Ejercicios Basicos HTMLEjercicios Basicos HTML
Ejercicios Basicos HTMLJUJEblog
 
PROGRAMAS EN DEV C++
PROGRAMAS EN DEV C++PROGRAMAS EN DEV C++
PROGRAMAS EN DEV C++KarenAlmanza
 
Manual c++
Manual c++Manual c++
Manual c++slent
 
Ventana y sus partes excel 2010
Ventana y sus partes excel 2010Ventana y sus partes excel 2010
Ventana y sus partes excel 2010perruana11
 

Destacado (19)

Programación en html 2
Programación en html 2Programación en html 2
Programación en html 2
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
Programación en html 3
Programación en html 3Programación en html 3
Programación en html 3
 
Teoria de operaciones básicas
Teoria de operaciones básicasTeoria de operaciones básicas
Teoria de operaciones básicas
 
FORMATOS EN EXCEL
FORMATOS EN EXCELFORMATOS EN EXCEL
FORMATOS EN EXCEL
 
Tipos de datos
Tipos de datosTipos de datos
Tipos de datos
 
Creación de gráficas
Creación de gráficasCreación de gráficas
Creación de gráficas
 
Filas columnas y celdas etc
Filas columnas y celdas etcFilas columnas y celdas etc
Filas columnas y celdas etc
 
Proyecto de Grado
Proyecto de GradoProyecto de Grado
Proyecto de Grado
 
Ejercicios básicos HTML
Ejercicios básicos HTMLEjercicios básicos HTML
Ejercicios básicos HTML
 
Cuadernillo (diseño)
Cuadernillo (diseño)Cuadernillo (diseño)
Cuadernillo (diseño)
 
Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTML
 
Ficha de codigos HTML
Ficha de codigos HTMLFicha de codigos HTML
Ficha de codigos HTML
 
Ejercicio html primer año
Ejercicio html primer añoEjercicio html primer año
Ejercicio html primer año
 
Ejercicios de HTML
Ejercicios de HTMLEjercicios de HTML
Ejercicios de HTML
 
Ejercicios Basicos HTML
Ejercicios Basicos HTMLEjercicios Basicos HTML
Ejercicios Basicos HTML
 
PROGRAMAS EN DEV C++
PROGRAMAS EN DEV C++PROGRAMAS EN DEV C++
PROGRAMAS EN DEV C++
 
Manual c++
Manual c++Manual c++
Manual c++
 
Ventana y sus partes excel 2010
Ventana y sus partes excel 2010Ventana y sus partes excel 2010
Ventana y sus partes excel 2010
 

Similar a HTML programación guía

Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891santi302930
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4mf_0529
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraSUSANTAMOTHER
 
como insertar imágenes en HTML
como insertar imágenes en HTMLcomo insertar imágenes en HTML
como insertar imágenes en HTMLjoseNvarela906
 
Wordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audioWordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audioEdgar Fernández Mendoza
 
2. el post elementos principales g150
2. el post elementos principales g1502. el post elementos principales g150
2. el post elementos principales g150Marcos Cadenato
 
2. el post elementos principales g150
2. el post elementos principales g1502. el post elementos principales g150
2. el post elementos principales g150Marcos Cadenato
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4davidrg4l
 
2 el post elementos principales
2 el post elementos principales2 el post elementos principales
2 el post elementos principalesMaru D. B.
 
Taller2 Wordpress
Taller2 WordpressTaller2 Wordpress
Taller2 WordpressUCCI
 
Tema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlTema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlSalomon Aquino
 
¿Cómo optimizar imágenes para Google? - INFOGRAFIA
¿Cómo optimizar imágenes para Google? - INFOGRAFIA¿Cómo optimizar imágenes para Google? - INFOGRAFIA
¿Cómo optimizar imágenes para Google? - INFOGRAFIALuz Cruz
 

Similar a HTML programación guía (20)

Unidad 2
Unidad 2Unidad 2
Unidad 2
 
U2
U2U2
U2
 
Web 4
Web 4Web 4
Web 4
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
como insertar imágenes en HTML
como insertar imágenes en HTMLcomo insertar imágenes en HTML
como insertar imágenes en HTML
 
Wordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audioWordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audio
 
2. el post elementos principales g150
2. el post elementos principales g1502. el post elementos principales g150
2. el post elementos principales g150
 
2. el post elementos principales g150
2. el post elementos principales g1502. el post elementos principales g150
2. el post elementos principales g150
 
Imagenes en un blog
Imagenes en un blogImagenes en un blog
Imagenes en un blog
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Martin lopoez 905
Martin lopoez 905Martin lopoez 905
Martin lopoez 905
 
Martin lopoez 905 30
Martin lopoez 905 30Martin lopoez 905 30
Martin lopoez 905 30
 
2 el post elementos principales
2 el post elementos principales2 el post elementos principales
2 el post elementos principales
 
Taller2 Wordpress
Taller2 WordpressTaller2 Wordpress
Taller2 Wordpress
 
242310
242310242310
242310
 
Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3
 
Tema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlTema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en html
 
¿Cómo optimizar imágenes para Google? - INFOGRAFIA
¿Cómo optimizar imágenes para Google? - INFOGRAFIA¿Cómo optimizar imágenes para Google? - INFOGRAFIA
¿Cómo optimizar imágenes para Google? - INFOGRAFIA
 

Último

Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleJonathanCovena1
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arteRaquel Martín Contreras
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxPryhaSalam
 
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfMARIAPAULAMAHECHAMOR
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxPRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxinformacionasapespu
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinavergarakarina022
 

Último (20)

Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo Sostenible
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arte
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
 
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 
La Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdfLa Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdf
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdf
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxPRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karina
 

HTML programación guía

  • 2. Repaso En 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!
  • 3.  Imágenes La 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”>
  • 4.  ¿Cómo obtener la dirección de la imagen? 1. Ingresas a google  imágenes y buscas la imagen que necesitas
  • 5.  ¿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”
  • 6.  ¿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.
  • 7. ACTIVIDAD 6 1. 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!