FORMAS DE INSERTAR UNA IMAGEN
• A LA HORA DE CREAR UNA PÁGINA WEB PODEMOS INTRODUCIR GRÁFICOS
DE FORMA MUY SENCILLA, SÓLO HAY QUE TENER EN CUENTA QUE LAS
IMÁGENES DEBEN TENER FORMATO GIF O JPEG.
• LA ETIQUETA UTILIZADA PARAAGREGAR IMÁGENES A UNA PÁGINA WEB ES
<IMG> Y VAACOMPAÑADA DE UN ATRIBUTO FUNDAMENTAL"SRC", QUE
INDICA LA RUTA DONDE SE ENCUENTRA EL ARCHIVO QUE CONTIENE LA
IMAGEN A INSERTAR. ES DECIR:
<IMG SRC="LUGAR DONDE GUARDO LA IMAGEN">
• SUPONGAMOS QUE TENEMOS LA IMAGEN DRAGONBALL.GIF, QUE ESTÁ
PRESENTE EN EL MISMO, DIRECTORIO EN DONDE ESTA LA PAGINAY QUE LA
QUEREMOS INSERTAR <IMG SRC="DRAGONBALL.GIF">
• SI UNA IMAGEN NO SE PUEDE MOSTRAR POR ALGUNA RAZÓN, EL ATRIBUTO
ALT PROPORCIONA TEXTO ALTERNATIVO PARA MOSTRAR EN SU LUGAR.
EJEMPLO
GIF
<div align="left">
<IMG
SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif "
alt="gif" border="0"></div>
GIF alineado hacia la izquierda del texto
Usando atributo div
GIF alineado hacia la izquierda del texto
Usando atributo div
<p><IMG
SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif "
alt="Funny image" border="1" ALIGN=RIGHT>
GIF alineado hacia la derecha del texto. Usando atributo ALING</p>
<p><IMG
SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif "
alt="Funny image" border="2" ALIGN=Left>
GIF alineado hacia la izquierda del texto. Usando atributo ALING</p>
GIF alineado hacia la derecha del
texto. Usando atributo ALING
GIF alineado hacia la izquierda del
texto. Usando atributo ALING
GIF DENTRO DE UNA TABLA
<TABLE BORDER=2 ALIGN="LEFT"
width="80%"BGCOLOR=pink >
<TH bgcolor=white colspan="2"> Gif</TH>
<TR><TD><img
src="https://media.tenor.com/images/b65504
dbb7eeafc34f3ae35c455cf10f/tenor.gif">
</TD>
<TD><img
src="https://media0.giphy.com/media/3o6UB
5RrlQuMfZp82Y/giphy.gif"></TD></TR>
<tr><td><img
src="https://media1.tenor.com/images/d52b3
54914d8a0f1ac545b48e2751312/tenor.gif?ite
mid=7853088"></td>
<td></td></tr>
</TABLE>
GIF DENTRO DE UNA MARQUESINA
<center><marquee bgcolor=#3600FF behavior="alternate" direction="up" width="100%"
height=500><marquee direction="right">
<img src="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif"
border="4">
</marquee></center><br>
INSERTAR AUDIO EN
HTML
HTML INTRODUCE UN SOPORTE INTEGRADO PARA EL
CONTENIDO MULTIMEDIA GRACIAS AL ELEMENTO <AUDIO>,
OFRECIENDO LA POSIBILIDAD DE INSERTAR CONTENIDO
MULTIMEDIA EN DOCUMENTOS HTML.
ATRIBUTOS DE LA ETIQUETA <AUDIO>
•CONTROLS: INDICA SI SE DEBE MOSTRAR LOS CONTROLES DE REPRODUCCIÓN DEL
AUDIO. (PLAY, STOP, VOLUMEN).
•AUTOPLAY: INDICA SI EL AUDIO SE INICIA AUTOMÁTICAMENTE AL CARGAR LA
PAGINA HTML.
•LOOP: REPRODUCCIÓN EN BUCLE: AL ACABAR EL AUDIO, A REPRODUCCIÓN VOLVERÁ
A EMPEZAR UNA Y OTRA VEZ.
•PRELOAD: INDICA SI EL AUDIO SE EMPIEZA A CARGAR CUANDO EL NAVEGADOR
CARGA LA PAGINA HTML. PONER =“NONE” EN GALERÍAS DE AUDIOS.
•MUTED: SIN AUDIO.
•SRC: ESPECIFICA LA URL DEL AUDIO A REPRODUCIR.
EXISTEN VARIOS FORMATOS PARA PODER INGRESAR
UN AUDIO EN HTML.
INSERTAR VIDEO EN HTML5
• LA ETIQUETA <VIDEO>
• LA ETIQUETA VIDEO TAMBIÉN TIENE UN PESO MUY FUERTE
EN HTML5 POR QUE VIENE A FACILITARNOS LAS COSAS EN
CUANTO A LA NECESIDAD DE AGREGAR CONTENIDO
AUDIOVISUAL EN NUESTRA PÁGINA WEB.
• LA ETIQUETA <VIDEO> ES LA ETIQUETA QUE MÁS FAMOSA
SE HIZO YA QUE EL VIDEO EN INTERNET IMPLICA MUCHAS
INNOVACIONES DESDE QUE FLASH PLAYER NOS PROPUSO
USAR VIDEO CON CALIDAD HD Y EL CODEC H.264,
•<VIDEO SRC="VIDEO1.MP4" WIDTH="640"
HEIGHT="360" CONTROLS AUTOPLAY
PRELOAD></VIDEO>
EXPLIQUEMOS LOS ATRIBUTOS DE LA ETIQUETA:
• SRC: NOS ENLAZA EL ARCHIVO DE VIDEO QUE QUEREMOS REPRODUCIR.
• WIDTH: NOS DEFINE EL ANCHO DEL VIDEO EN PÍXELES.
• HEIGHT: NOS DEFINE LA ALTURA DEL VIDEO EN PÍXELES.
• CONTROLS: NOS PERMITE IMPLEMENTAR LOS CONTROLES DEL REPRODUCTOR POR
DEFECTO DEL NAVEGADOR COMO, BOTÓN PLAY-PAUSE, SEEK Y VOLUMEN.
• AUTOPLAY: NOS PERMITE REPRODUCIR EL ARCHIVO DE VIDEO DESDE QUE SE
CARGA LA PÁGINA.
• PRELOAD: NOS CARGA UN POCO EL ARCHIVO DE VIDEO ANTES DE INICIAR LA
REPRODUCCIÓN EN EL BUFFER PARA QUE NO SE TRABE POR REPRODUCIR MÁS DE
LO QUE CARGA.

Html5 img gif_sonido_video-comprimido

  • 1.
    FORMAS DE INSERTARUNA IMAGEN • A LA HORA DE CREAR UNA PÁGINA WEB PODEMOS INTRODUCIR GRÁFICOS DE FORMA MUY SENCILLA, SÓLO HAY QUE TENER EN CUENTA QUE LAS IMÁGENES DEBEN TENER FORMATO GIF O JPEG. • LA ETIQUETA UTILIZADA PARAAGREGAR IMÁGENES A UNA PÁGINA WEB ES <IMG> Y VAACOMPAÑADA DE UN ATRIBUTO FUNDAMENTAL"SRC", QUE INDICA LA RUTA DONDE SE ENCUENTRA EL ARCHIVO QUE CONTIENE LA IMAGEN A INSERTAR. ES DECIR: <IMG SRC="LUGAR DONDE GUARDO LA IMAGEN"> • SUPONGAMOS QUE TENEMOS LA IMAGEN DRAGONBALL.GIF, QUE ESTÁ PRESENTE EN EL MISMO, DIRECTORIO EN DONDE ESTA LA PAGINAY QUE LA QUEREMOS INSERTAR <IMG SRC="DRAGONBALL.GIF"> • SI UNA IMAGEN NO SE PUEDE MOSTRAR POR ALGUNA RAZÓN, EL ATRIBUTO ALT PROPORCIONA TEXTO ALTERNATIVO PARA MOSTRAR EN SU LUGAR.
  • 2.
  • 4.
    GIF <div align="left"> <IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif " alt="gif"border="0"></div> GIF alineado hacia la izquierda del texto Usando atributo div GIF alineado hacia la izquierda del texto Usando atributo div
  • 5.
    <p><IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif " alt="Funny image"border="1" ALIGN=RIGHT> GIF alineado hacia la derecha del texto. Usando atributo ALING</p> <p><IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif " alt="Funny image" border="2" ALIGN=Left> GIF alineado hacia la izquierda del texto. Usando atributo ALING</p> GIF alineado hacia la derecha del texto. Usando atributo ALING GIF alineado hacia la izquierda del texto. Usando atributo ALING
  • 6.
    GIF DENTRO DEUNA TABLA <TABLE BORDER=2 ALIGN="LEFT" width="80%"BGCOLOR=pink > <TH bgcolor=white colspan="2"> Gif</TH> <TR><TD><img src="https://media.tenor.com/images/b65504 dbb7eeafc34f3ae35c455cf10f/tenor.gif"> </TD> <TD><img src="https://media0.giphy.com/media/3o6UB 5RrlQuMfZp82Y/giphy.gif"></TD></TR> <tr><td><img src="https://media1.tenor.com/images/d52b3 54914d8a0f1ac545b48e2751312/tenor.gif?ite mid=7853088"></td> <td></td></tr> </TABLE>
  • 7.
    GIF DENTRO DEUNA MARQUESINA <center><marquee bgcolor=#3600FF behavior="alternate" direction="up" width="100%" height=500><marquee direction="right"> <img src="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif" border="4"> </marquee></center><br>
  • 8.
    INSERTAR AUDIO EN HTML HTMLINTRODUCE UN SOPORTE INTEGRADO PARA EL CONTENIDO MULTIMEDIA GRACIAS AL ELEMENTO <AUDIO>, OFRECIENDO LA POSIBILIDAD DE INSERTAR CONTENIDO MULTIMEDIA EN DOCUMENTOS HTML.
  • 9.
    ATRIBUTOS DE LAETIQUETA <AUDIO> •CONTROLS: INDICA SI SE DEBE MOSTRAR LOS CONTROLES DE REPRODUCCIÓN DEL AUDIO. (PLAY, STOP, VOLUMEN). •AUTOPLAY: INDICA SI EL AUDIO SE INICIA AUTOMÁTICAMENTE AL CARGAR LA PAGINA HTML. •LOOP: REPRODUCCIÓN EN BUCLE: AL ACABAR EL AUDIO, A REPRODUCCIÓN VOLVERÁ A EMPEZAR UNA Y OTRA VEZ. •PRELOAD: INDICA SI EL AUDIO SE EMPIEZA A CARGAR CUANDO EL NAVEGADOR CARGA LA PAGINA HTML. PONER =“NONE” EN GALERÍAS DE AUDIOS. •MUTED: SIN AUDIO. •SRC: ESPECIFICA LA URL DEL AUDIO A REPRODUCIR.
  • 10.
    EXISTEN VARIOS FORMATOSPARA PODER INGRESAR UN AUDIO EN HTML.
  • 11.
    INSERTAR VIDEO ENHTML5 • LA ETIQUETA <VIDEO> • LA ETIQUETA VIDEO TAMBIÉN TIENE UN PESO MUY FUERTE EN HTML5 POR QUE VIENE A FACILITARNOS LAS COSAS EN CUANTO A LA NECESIDAD DE AGREGAR CONTENIDO AUDIOVISUAL EN NUESTRA PÁGINA WEB. • LA ETIQUETA <VIDEO> ES LA ETIQUETA QUE MÁS FAMOSA SE HIZO YA QUE EL VIDEO EN INTERNET IMPLICA MUCHAS INNOVACIONES DESDE QUE FLASH PLAYER NOS PROPUSO USAR VIDEO CON CALIDAD HD Y EL CODEC H.264,
  • 12.
    •<VIDEO SRC="VIDEO1.MP4" WIDTH="640" HEIGHT="360"CONTROLS AUTOPLAY PRELOAD></VIDEO> EXPLIQUEMOS LOS ATRIBUTOS DE LA ETIQUETA: • SRC: NOS ENLAZA EL ARCHIVO DE VIDEO QUE QUEREMOS REPRODUCIR. • WIDTH: NOS DEFINE EL ANCHO DEL VIDEO EN PÍXELES. • HEIGHT: NOS DEFINE LA ALTURA DEL VIDEO EN PÍXELES. • CONTROLS: NOS PERMITE IMPLEMENTAR LOS CONTROLES DEL REPRODUCTOR POR DEFECTO DEL NAVEGADOR COMO, BOTÓN PLAY-PAUSE, SEEK Y VOLUMEN. • AUTOPLAY: NOS PERMITE REPRODUCIR EL ARCHIVO DE VIDEO DESDE QUE SE CARGA LA PÁGINA. • PRELOAD: NOS CARGA UN POCO EL ARCHIVO DE VIDEO ANTES DE INICIAR LA REPRODUCCIÓN EN EL BUFFER PARA QUE NO SE TRABE POR REPRODUCIR MÁS DE LO QUE CARGA.