SlideShare una empresa de Scribd logo
ENLACES y TEXTO/IMAGEN EN MOVIMIENTO
ENLACES
Antes que nada cree una carpeta en el escritorio y llámela images. Esta carpeta servirá para guardar las
imágenes que ocuparemos en los ejercicios de esta práctica.
Las imágenes utilizadas en esta página son las siguientes. No olvide guardarlas en la carpeta creada
previamente.
 Imagen del jugador de futbol: http://goo.gl/ZT9mpH
 Imagen de las flores: http://goo.gl/mYQjGS
NOTA IMPORTANTE: los nombres de las imágenes deben coincidir. Si el nombre de la imagen es
distinto al que aparece en el código o si la extensión o carpeta especificada no coinciden, entonces la
imagen NO se mostrará en la página web.
Una vez descargadas las imágenes, se procederá a la escritura de la página web.
Abra Sublime Text 3 y escriba el siguiente código en un archivo llamado enlaces.html
Una vez terminado ejecute esta página en el navegador y deberá de verse de la siguiente manera:
Haga clic sobre los enlaces creados y sobre las imágenes que se muestran en el sitio.
TEXTO/IMAGEN EN MOVIMIENTO
Se utilizará un concepto llamado MARQUESINA, lo cual es un cuadro que se desplaza el texto o imagen.
Para este ejercicio se descargará la siguiente imagen: http://goo.gl/TYgHqR
Abra un nuevo documento de Sublime Text 3, escriba lo siguiente y guárdelo como marquesina.html
Ahora en el navegador deberá de verse algo así:
Como podrá notar, tanto los textos como las imágenes ahora poseen movimiento.
Antes de finalizar solamente unas aclaraciones importantes:
 Cuando se utilicen imágenes que NO se encuentren en la misma carpeta del archivo HTML,
deberá colocar la ruta de carpetas donde se encuentra la imagen, no olvidando el nombre
correcto de esta y su extensión.
 Al escribir la dirección de un enlace:
o Si apunta un sitio web, no debe de olvidar escribirlo de esta forma: http://nombredelsitio
o Si apunta a un correo electrónico se escribe mailto:direcciondecorreo
 La etiquetas <center></center> y <marquee></marquee> han quedado obsoletas gracias a
tecnologías mucho más modernas como CSS. Sin embargo, esto no impide su utilización.

Más contenido relacionado

Destacado

IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...
IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...
IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...
IEEEBEBTECHSTUDENTPROJECTS
 
Proyecto final grupo 04.1
Proyecto final grupo 04.1Proyecto final grupo 04.1
Proyecto final grupo 04.1Evelyn Esquivel
 
Wiki
WikiWiki
Tarea1
Tarea1Tarea1
Rúbrica foro-daniela-paysandú
Rúbrica foro-daniela-paysandúRúbrica foro-daniela-paysandú
Rúbrica foro-daniela-paysandúctepay
 
Ciencia y metodo cientifico
Ciencia y metodo cientificoCiencia y metodo cientifico
Ciencia y metodo cientificoNelson Olan
 
Novedades ArcGIS 10.2.1
Novedades ArcGIS 10.2.1Novedades ArcGIS 10.2.1
Novedades ArcGIS 10.2.1Esri
 
TICs e innovación educativa
TICs e innovación educativaTICs e innovación educativa
TICs e innovación educativa
Lupiszepeda
 
Primera feria ceibal blanquillo
Primera feria ceibal blanquilloPrimera feria ceibal blanquillo
Primera feria ceibal blanquillofum amad
 
Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...
Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...
Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...
Congreso Internet en el Aula
 
Narrativa renacentista
Narrativa renacentistaNarrativa renacentista
Narrativa renacentistaPablo Reneses
 
La segunda republica fedral y el segundo imperio parte 2
La segunda republica fedral y el segundo imperio parte 2La segunda republica fedral y el segundo imperio parte 2
La segunda republica fedral y el segundo imperio parte 2
Jorge García
 
Rivera marquez jose_antonio_raul_15
Rivera marquez jose_antonio_raul_15Rivera marquez jose_antonio_raul_15
Rivera marquez jose_antonio_raul_15alealmeida
 
La generación del 27
La generación del 27La generación del 27
La generación del 27
Javier Ibarra Menares
 
BIBLIOGRAFIA
BIBLIOGRAFIABIBLIOGRAFIA
BIBLIOGRAFIAadanrc83
 
Formación de lectores y escritores en las redes
Formación de lectores y escritores en las redesFormación de lectores y escritores en las redes
Formación de lectores y escritores en las redes
marugianfelice
 
Polifarmacia i prescripció gent gran. mutuam 15.1.2011
Polifarmacia i prescripció gent gran. mutuam 15.1.2011Polifarmacia i prescripció gent gran. mutuam 15.1.2011
Polifarmacia i prescripció gent gran. mutuam 15.1.2011Mireia Sans Corrales
 

Destacado (20)

IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...
IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...
IEEE 2014 DOTNET SOFTWARE ENGINEER PROJECTS Automatic summarization of bug re...
 
Proyecto final grupo 04.1
Proyecto final grupo 04.1Proyecto final grupo 04.1
Proyecto final grupo 04.1
 
Wiki
WikiWiki
Wiki
 
Tarea1
Tarea1Tarea1
Tarea1
 
Rúbrica foro-daniela-paysandú
Rúbrica foro-daniela-paysandúRúbrica foro-daniela-paysandú
Rúbrica foro-daniela-paysandú
 
Ciencia y metodo cientifico
Ciencia y metodo cientificoCiencia y metodo cientifico
Ciencia y metodo cientifico
 
Novedades ArcGIS 10.2.1
Novedades ArcGIS 10.2.1Novedades ArcGIS 10.2.1
Novedades ArcGIS 10.2.1
 
Analisis
AnalisisAnalisis
Analisis
 
TICs e innovación educativa
TICs e innovación educativaTICs e innovación educativa
TICs e innovación educativa
 
Primera feria ceibal blanquillo
Primera feria ceibal blanquilloPrimera feria ceibal blanquillo
Primera feria ceibal blanquillo
 
Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...
Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...
Alfons Gort Beà - "Una aplicació de PDI's amb alumnes amb discapacitat visual...
 
Narrativa renacentista
Narrativa renacentistaNarrativa renacentista
Narrativa renacentista
 
Esquema 132
Esquema 132Esquema 132
Esquema 132
 
La segunda republica fedral y el segundo imperio parte 2
La segunda republica fedral y el segundo imperio parte 2La segunda republica fedral y el segundo imperio parte 2
La segunda republica fedral y el segundo imperio parte 2
 
Rivera marquez jose_antonio_raul_15
Rivera marquez jose_antonio_raul_15Rivera marquez jose_antonio_raul_15
Rivera marquez jose_antonio_raul_15
 
La generación del 27
La generación del 27La generación del 27
La generación del 27
 
Qualidade de vida
Qualidade de vidaQualidade de vida
Qualidade de vida
 
BIBLIOGRAFIA
BIBLIOGRAFIABIBLIOGRAFIA
BIBLIOGRAFIA
 
Formación de lectores y escritores en las redes
Formación de lectores y escritores en las redesFormación de lectores y escritores en las redes
Formación de lectores y escritores en las redes
 
Polifarmacia i prescripció gent gran. mutuam 15.1.2011
Polifarmacia i prescripció gent gran. mutuam 15.1.2011Polifarmacia i prescripció gent gran. mutuam 15.1.2011
Polifarmacia i prescripció gent gran. mutuam 15.1.2011
 

Similar a Practica 5 HTML - Enlaces y texto-imagen en movimiento

Bootstrap
BootstrapBootstrap
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
Inmaculada Concepción
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
alexander polanco
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle nogueraGisselle Noguera
 
Material didáctico de web 2.0 tarea 3
Material didáctico de web 2.0 tarea 3Material didáctico de web 2.0 tarea 3
Material didáctico de web 2.0 tarea 3
prometeoleonado
 
Herramientas a usar en los Entornos Virtuales de Aprendizajes
Herramientas  a usar en los Entornos Virtuales de AprendizajesHerramientas  a usar en los Entornos Virtuales de Aprendizajes
Herramientas a usar en los Entornos Virtuales de Aprendizajes
xcrc
 
Manual de practicas de dreamweaver
Manual de practicas de dreamweaverManual de practicas de dreamweaver
Manual de practicas de dreamweaver
daaaaaaaaaaa Gutiierriitos
 

Similar a Practica 5 HTML - Enlaces y texto-imagen en movimiento (20)

Bootstrap
BootstrapBootstrap
Bootstrap
 
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
U2
U2U2
U2
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Material didáctico de web 2.0 tarea 3
Material didáctico de web 2.0 tarea 3Material didáctico de web 2.0 tarea 3
Material didáctico de web 2.0 tarea 3
 
Herramientas a usar en los Entornos Virtuales de Aprendizajes
Herramientas  a usar en los Entornos Virtuales de AprendizajesHerramientas  a usar en los Entornos Virtuales de Aprendizajes
Herramientas a usar en los Entornos Virtuales de Aprendizajes
 
Manual de practicas de dreamweaver
Manual de practicas de dreamweaverManual de practicas de dreamweaver
Manual de practicas de dreamweaver
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
tterezaa
tterezaatterezaa
tterezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 
Tt erezaa
Tt erezaaTt erezaa
Tt erezaa
 

Último

FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIOFISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
DarwinNestorArapaQui
 
EXPERIENCIA PROYECTOS STARTUP JAVIER LASA
EXPERIENCIA PROYECTOS STARTUP JAVIER LASAEXPERIENCIA PROYECTOS STARTUP JAVIER LASA
EXPERIENCIA PROYECTOS STARTUP JAVIER LASA
Javier Lasa
 
EduLearnIAappde IAparatodosdisponible.pptx
EduLearnIAappde IAparatodosdisponible.pptxEduLearnIAappde IAparatodosdisponible.pptx
EduLearnIAappde IAparatodosdisponible.pptx
Elizabeth Mejia
 
Presentación Arduino, proyecto colectivo
Presentación Arduino, proyecto colectivoPresentación Arduino, proyecto colectivo
Presentación Arduino, proyecto colectivo
juanlemus11122
 
Los derechos de autor y Ética Profesional
Los derechos de autor y Ética ProfesionalLos derechos de autor y Ética Profesional
Los derechos de autor y Ética Profesional
bgonzalezm20
 
WordPress training basics - básicos de cómo enseñar WordPress
WordPress training basics - básicos de cómo enseñar WordPressWordPress training basics - básicos de cómo enseñar WordPress
WordPress training basics - básicos de cómo enseñar WordPress
Fernando Tellado
 
fase 4-Estudio de la geometria analitica[1].pptx
fase 4-Estudio de la geometria analitica[1].pptxfase 4-Estudio de la geometria analitica[1].pptx
fase 4-Estudio de la geometria analitica[1].pptx
QuerubinOlayamedina
 
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA IINSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
CESAR MIJAEL ESPINOZA SALAZAR
 
Sistemas-de-Numeración-para-Primero-de-Secundaria.doc
Sistemas-de-Numeración-para-Primero-de-Secundaria.docSistemas-de-Numeración-para-Primero-de-Secundaria.doc
Sistemas-de-Numeración-para-Primero-de-Secundaria.doc
LuisEnriqueCarboneDe
 

Último (9)

FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIOFISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
 
EXPERIENCIA PROYECTOS STARTUP JAVIER LASA
EXPERIENCIA PROYECTOS STARTUP JAVIER LASAEXPERIENCIA PROYECTOS STARTUP JAVIER LASA
EXPERIENCIA PROYECTOS STARTUP JAVIER LASA
 
EduLearnIAappde IAparatodosdisponible.pptx
EduLearnIAappde IAparatodosdisponible.pptxEduLearnIAappde IAparatodosdisponible.pptx
EduLearnIAappde IAparatodosdisponible.pptx
 
Presentación Arduino, proyecto colectivo
Presentación Arduino, proyecto colectivoPresentación Arduino, proyecto colectivo
Presentación Arduino, proyecto colectivo
 
Los derechos de autor y Ética Profesional
Los derechos de autor y Ética ProfesionalLos derechos de autor y Ética Profesional
Los derechos de autor y Ética Profesional
 
WordPress training basics - básicos de cómo enseñar WordPress
WordPress training basics - básicos de cómo enseñar WordPressWordPress training basics - básicos de cómo enseñar WordPress
WordPress training basics - básicos de cómo enseñar WordPress
 
fase 4-Estudio de la geometria analitica[1].pptx
fase 4-Estudio de la geometria analitica[1].pptxfase 4-Estudio de la geometria analitica[1].pptx
fase 4-Estudio de la geometria analitica[1].pptx
 
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA IINSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
INSTITUTO AUCARA SEMANA NUMERO 7 AGROPECUARIA I
 
Sistemas-de-Numeración-para-Primero-de-Secundaria.doc
Sistemas-de-Numeración-para-Primero-de-Secundaria.docSistemas-de-Numeración-para-Primero-de-Secundaria.doc
Sistemas-de-Numeración-para-Primero-de-Secundaria.doc
 

Practica 5 HTML - Enlaces y texto-imagen en movimiento

  • 1. ENLACES y TEXTO/IMAGEN EN MOVIMIENTO ENLACES Antes que nada cree una carpeta en el escritorio y llámela images. Esta carpeta servirá para guardar las imágenes que ocuparemos en los ejercicios de esta práctica. Las imágenes utilizadas en esta página son las siguientes. No olvide guardarlas en la carpeta creada previamente.  Imagen del jugador de futbol: http://goo.gl/ZT9mpH  Imagen de las flores: http://goo.gl/mYQjGS NOTA IMPORTANTE: los nombres de las imágenes deben coincidir. Si el nombre de la imagen es distinto al que aparece en el código o si la extensión o carpeta especificada no coinciden, entonces la imagen NO se mostrará en la página web. Una vez descargadas las imágenes, se procederá a la escritura de la página web. Abra Sublime Text 3 y escriba el siguiente código en un archivo llamado enlaces.html Una vez terminado ejecute esta página en el navegador y deberá de verse de la siguiente manera:
  • 2. Haga clic sobre los enlaces creados y sobre las imágenes que se muestran en el sitio. TEXTO/IMAGEN EN MOVIMIENTO Se utilizará un concepto llamado MARQUESINA, lo cual es un cuadro que se desplaza el texto o imagen. Para este ejercicio se descargará la siguiente imagen: http://goo.gl/TYgHqR Abra un nuevo documento de Sublime Text 3, escriba lo siguiente y guárdelo como marquesina.html
  • 3. Ahora en el navegador deberá de verse algo así: Como podrá notar, tanto los textos como las imágenes ahora poseen movimiento. Antes de finalizar solamente unas aclaraciones importantes:  Cuando se utilicen imágenes que NO se encuentren en la misma carpeta del archivo HTML, deberá colocar la ruta de carpetas donde se encuentra la imagen, no olvidando el nombre correcto de esta y su extensión.  Al escribir la dirección de un enlace: o Si apunta un sitio web, no debe de olvidar escribirlo de esta forma: http://nombredelsitio o Si apunta a un correo electrónico se escribe mailto:direcciondecorreo  La etiquetas <center></center> y <marquee></marquee> han quedado obsoletas gracias a tecnologías mucho más modernas como CSS. Sin embargo, esto no impide su utilización.