SlideShare una empresa de Scribd logo
1 de 5
NOMBRE: JUAN JOSÉ CARRERA ALDAZ
CURSO: 5TO INFORMÁTICA
FECHA: 25/01/2018
Como ingresar imágenes en CSS
image
Establece la o imagen de fondo mostrando al navegador
dónde encontrar la imagen utilizando la URL. Por
ejemplo: ). Fijaos en que la ruta va precedida de la palabra
clave y entre paréntesis. Esta sintaxis es importante para
que el navegador entienda que queréis indicar una
ubicación.
Indica la ruta o URL de
la imagen de fondo.
Utilizando el elemento <style> , en el interior del
documento al que se le quiere dar estilo, y que
generalmente se situaría en la sección . De esta forma
los estilos serán reconocidos antes de que la página
se cargue por completo.
Utilizando estilos directamente sobre aquellos
elementos que lo permiten a través del
atributo <style> dentro de <body>. Pero este tipo de
estilo pierde las ventajas que ofrecen las hojas de
estilo al mezclarse el contenido con la presentación.
Como poner un estilo
diferente en css
Como ingresar videos en css
Otros atributos permiten establecer el archivo de origen,
agregar una imagen de marcador de posición o
comenzar a reproducir el vídeo automáticamente. Al
igual que la mayoría de los elementos HTML, puedes
usar las Hojas de estilo CSS para dar estilo y ajustar la
posición del elemento.
Si estableces solo una dimensión del reproductor de
vídeo, por ejemplo el alto, el reproductor de vídeo ajusta
el tamaño del vídeo a esa dimensión y escala la otra
dimensión en función de la relación de aspecto del
contenido de vídeo. Si estableces ambas dimensiones
con una relación de aspecto que no se corresponde con
el contenido del vídeo, el reproductor escala la
dimensión más próxima para que se vea, pero mantiene
su relación de aspecto. El vídeo se centrará horizontal o
verticalmente con espacio en blanco a cada lado.
El ejemplo siguiente reproduce un vídeo, muestra un
póster hasta que se carga el contenido y reproduce un
vídeo repetidamente con los controles de reproducción.
En este pequeño tutorial vamos a ver cómo crear el
típico menú lateral verticaldesplegable. Seguro que lo has
visto en mil sitios. De entrada, el menú permanece oculto y,
al mostrarse, empuja al div del contenido principal. Primero
lo veremos usando JavaScript y luego solo con HTML y CSS.
Como crear un menú desplegable en css
Abre tu hoja de estilos CSS. ...
Agrega el código "clearfix". ...
Crea el diseño básico. ...
Haz que aparezcan los ítems desplegables al pasar el cursor.
...
Indica el menú desplegable con una flecha. ...
Ajusta el relleno, el fondo y otras propiedades.

Más contenido relacionado

La actualidad más candente

Cómo insertar una presentación en un glosario Moodle
Cómo insertar una presentación en un glosario MoodleCómo insertar una presentación en un glosario Moodle
Cómo insertar una presentación en un glosario MoodleLisbeth G. Flores Rojas
 
Como crear un blog parte ii
Como crear un blog parte iiComo crear un blog parte ii
Como crear un blog parte iilauralaurita27
 
Clase 2 configurar blog con blogger
Clase 2 configurar blog con bloggerClase 2 configurar blog con blogger
Clase 2 configurar blog con bloggerMiryam Illangua
 
5.menus&entradas
5.menus&entradas5.menus&entradas
5.menus&entradasmarinmercy
 
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
 
GARCIA MENDOZA GABRIEL ALEJANDRO P13P
GARCIA MENDOZA GABRIEL ALEJANDRO P13PGARCIA MENDOZA GABRIEL ALEJANDRO P13P
GARCIA MENDOZA GABRIEL ALEJANDRO P13PALEXMILLER98
 
Diapositiva presentacion
Diapositiva presentacionDiapositiva presentacion
Diapositiva presentacionAdriana Ducuara
 
Pasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog IIPasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog IIraquelarse
 
Tutorial para power point Rafael quinto
Tutorial para power point Rafael quintoTutorial para power point Rafael quinto
Tutorial para power point Rafael quintoJesús Huerta
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas webMario Villeda
 
Tutorial Zona Contenido Página Web 2015
Tutorial  Zona Contenido Página Web 2015Tutorial  Zona Contenido Página Web 2015
Tutorial Zona Contenido Página Web 2015Vmers01
 
Adapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPSAdapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPSxoopsproject
 
CóMo Hacer Un Slide 09
CóMo Hacer Un Slide 09CóMo Hacer Un Slide 09
CóMo Hacer Un Slide 09marimarpego
 
Tutorial de movie maker en la educación...Maira morales pérez
Tutorial de movie maker en la educación...Maira morales pérezTutorial de movie maker en la educación...Maira morales pérez
Tutorial de movie maker en la educación...Maira morales pérezMairaestrellita
 
Guía clase #3 vwd
Guía clase #3 vwdGuía clase #3 vwd
Guía clase #3 vwdgustavo
 
TUTORIAL DE SLIDESHARE
TUTORIAL DE SLIDESHARETUTORIAL DE SLIDESHARE
TUTORIAL DE SLIDESHAREprofepardo13
 
Resumen del uso de Slideshare y Drive
Resumen del uso de Slideshare y Drive Resumen del uso de Slideshare y Drive
Resumen del uso de Slideshare y Drive ValeriaDavila6
 

La actualidad más candente (20)

Tarea de computación
Tarea de computaciónTarea de computación
Tarea de computación
 
Cómo insertar una presentación en un glosario Moodle
Cómo insertar una presentación en un glosario MoodleCómo insertar una presentación en un glosario Moodle
Cómo insertar una presentación en un glosario Moodle
 
Como crear un blog parte ii
Como crear un blog parte iiComo crear un blog parte ii
Como crear un blog parte ii
 
Definicion Power Point
Definicion Power PointDefinicion Power Point
Definicion Power Point
 
Sara prezi
Sara preziSara prezi
Sara prezi
 
Clase 2 configurar blog con blogger
Clase 2 configurar blog con bloggerClase 2 configurar blog con blogger
Clase 2 configurar blog con blogger
 
5.menus&entradas
5.menus&entradas5.menus&entradas
5.menus&entradas
 
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
 
GARCIA MENDOZA GABRIEL ALEJANDRO P13P
GARCIA MENDOZA GABRIEL ALEJANDRO P13PGARCIA MENDOZA GABRIEL ALEJANDRO P13P
GARCIA MENDOZA GABRIEL ALEJANDRO P13P
 
Diapositiva presentacion
Diapositiva presentacionDiapositiva presentacion
Diapositiva presentacion
 
Pasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog IIPasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog II
 
Tutorial para power point Rafael quinto
Tutorial para power point Rafael quintoTutorial para power point Rafael quinto
Tutorial para power point Rafael quinto
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas web
 
Tutorial Zona Contenido Página Web 2015
Tutorial  Zona Contenido Página Web 2015Tutorial  Zona Contenido Página Web 2015
Tutorial Zona Contenido Página Web 2015
 
Adapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPSAdapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPS
 
CóMo Hacer Un Slide 09
CóMo Hacer Un Slide 09CóMo Hacer Un Slide 09
CóMo Hacer Un Slide 09
 
Tutorial de movie maker en la educación...Maira morales pérez
Tutorial de movie maker en la educación...Maira morales pérezTutorial de movie maker en la educación...Maira morales pérez
Tutorial de movie maker en la educación...Maira morales pérez
 
Guía clase #3 vwd
Guía clase #3 vwdGuía clase #3 vwd
Guía clase #3 vwd
 
TUTORIAL DE SLIDESHARE
TUTORIAL DE SLIDESHARETUTORIAL DE SLIDESHARE
TUTORIAL DE SLIDESHARE
 
Resumen del uso de Slideshare y Drive
Resumen del uso de Slideshare y Drive Resumen del uso de Slideshare y Drive
Resumen del uso de Slideshare y Drive
 

Similar a Como ingresar elementos multimedia en CSS

Similar a Como ingresar elementos multimedia en CSS (20)

Como programar en htmil 5
Como programar en htmil 5Como programar en htmil 5
Como programar en htmil 5
 
Articulo monica y christian "español"
Articulo monica y christian "español"Articulo monica y christian "español"
Articulo monica y christian "español"
 
Samanta2
Samanta2Samanta2
Samanta2
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
30 trucos wordpress by ThemeYourself.com
30 trucos wordpress by ThemeYourself.com30 trucos wordpress by ThemeYourself.com
30 trucos wordpress by ThemeYourself.com
 
Dreamwear
DreamwearDreamwear
Dreamwear
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Dreamweaver Ale-Man
Dreamweaver Ale-ManDreamweaver Ale-Man
Dreamweaver Ale-Man
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweaver
 
Guia bootstrap
Guia bootstrapGuia bootstrap
Guia bootstrap
 
04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx
 
Tutorial ejercicio 1
Tutorial ejercicio 1Tutorial ejercicio 1
Tutorial ejercicio 1
 
Lorena
LorenaLorena
Lorena
 
Temas 10
Temas 10Temas 10
Temas 10
 
Prezi
PreziPrezi
Prezi
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 e
 
Illustrator reference
Illustrator referenceIllustrator reference
Illustrator reference
 

Último

NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfisrael garcia
 
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenadanielaerazok
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfOscarBlas6
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdflauradbernals
 
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAdanielaerazok
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webDecaunlz
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenajuniorcuellargomez
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdfedwinmelgarschlink2
 

Último (8)

NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
 
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalena
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdf
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la web
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 

Como ingresar elementos multimedia en CSS

  • 1. NOMBRE: JUAN JOSÉ CARRERA ALDAZ CURSO: 5TO INFORMÁTICA FECHA: 25/01/2018
  • 2. Como ingresar imágenes en CSS image Establece la o imagen de fondo mostrando al navegador dónde encontrar la imagen utilizando la URL. Por ejemplo: ). Fijaos en que la ruta va precedida de la palabra clave y entre paréntesis. Esta sintaxis es importante para que el navegador entienda que queréis indicar una ubicación. Indica la ruta o URL de la imagen de fondo.
  • 3. Utilizando el elemento <style> , en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección . De esta forma los estilos serán reconocidos antes de que la página se cargue por completo. Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación. Como poner un estilo diferente en css
  • 4. Como ingresar videos en css Otros atributos permiten establecer el archivo de origen, agregar una imagen de marcador de posición o comenzar a reproducir el vídeo automáticamente. Al igual que la mayoría de los elementos HTML, puedes usar las Hojas de estilo CSS para dar estilo y ajustar la posición del elemento. Si estableces solo una dimensión del reproductor de vídeo, por ejemplo el alto, el reproductor de vídeo ajusta el tamaño del vídeo a esa dimensión y escala la otra dimensión en función de la relación de aspecto del contenido de vídeo. Si estableces ambas dimensiones con una relación de aspecto que no se corresponde con el contenido del vídeo, el reproductor escala la dimensión más próxima para que se vea, pero mantiene su relación de aspecto. El vídeo se centrará horizontal o verticalmente con espacio en blanco a cada lado. El ejemplo siguiente reproduce un vídeo, muestra un póster hasta que se carga el contenido y reproduce un vídeo repetidamente con los controles de reproducción.
  • 5. En este pequeño tutorial vamos a ver cómo crear el típico menú lateral verticaldesplegable. Seguro que lo has visto en mil sitios. De entrada, el menú permanece oculto y, al mostrarse, empuja al div del contenido principal. Primero lo veremos usando JavaScript y luego solo con HTML y CSS. Como crear un menú desplegable en css Abre tu hoja de estilos CSS. ... Agrega el código "clearfix". ... Crea el diseño básico. ... Haz que aparezcan los ítems desplegables al pasar el cursor. ... Indica el menú desplegable con una flecha. ... Ajusta el relleno, el fondo y otras propiedades.