Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Documento 2 PDF

    Cargado por

    miguel ibañez
    23 vistas14 páginas

    Título original

    documento 2.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    23 vistas14 páginas

    Documento 2 PDF

    Cargado por

    miguel ibañez

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 14

    <iframe width="560" height="315"

    src="https://www.youtube.com/embed/eZ_HH3Kprmo" frameborder="0"
    allow="autoplay; encrypted-media" allowfullscreen></iframe>

    En HTML5 se introduce la interesante posibilidad de mostrar


    videos directamente desde nuestro navegador. De hecho, si
    arrastramos un video a la ventana del navegador, veremos que
    comienza a reproducirse en él. Para poder insertar videos en
    nuestras páginas HTML tenemos que utilizar la etiqueta <video>,
    que junto a la etiqueta <source> podremos utilizar estas capacidades
    multimedia de HTML5.
    Ojo: Si lo que quieres es insertar videos desde Youtube, Vimeo u
    otro servicio alternativa, debes utilizar la etiqueta <iframe> en lugar
    de la etiqueta <video>.

    Etiqueta HTML para video (modo básico)


    La etiqueta <video> tiene varios atributos a nuestra disposición:

    Atributo Valor Descripción

    Dirección Video a reproducir. Obligatoria si


    src
    URL actua como etiqueta contenedora.
    Atributo Valor Descripción

    Dirección Muestra una imagen a modo de


    poster
    URL presentación.

    auto |
    Indica como realizar la precarga
    preload metadata |
    del video.
    none

    Establece un nombre para un


    mediagroup nombre
    grupo de contenidos multimedia.

    Comienza a reproducir el video


    autoplay -
    automáticamente.

    Vuelve a iniciar el video cuando


    loop -
    finaliza su reproducción (bucle).
    Atributo Valor Descripción

    Establece el video sin sonido


    muted -
    (silenciado).

    Muestra los controles de


    controls - reproducción. Por defecto no se
    muestran.

    Indica el tamaño de ancho del


    width tamaño
    video.

    height tamaño Indica el tamaño de alto del video.

    Un primer ejemplo muy básico para colocar un video en nuestra


    página web:
    <video src="video.mp4" width="640" height="480"></video>

    Sin embargo, esto mostrará el primer fotograma del video, con un


    tamaño de 640x480, pero se verá como una imagen, ya que no
    muestra los controles del video y tampoco tiene la
    autoreproducción activada. Podríamos solucionarlo indicando los
    atributos controls o autoplay.
    Otro ejemplos básicos para colocar videos en nuestra página:
    <video src="video.webm" poster="presentacion.jpg"
    controls></video>
    <video src="video.mp4" autoplay muted loop></video>

    En este caso cargamos un video, pero que no se mostrará porque


    se ha indicado que se utilice una imagen de presentación que se
    mostrará hasta que el usuario pulse en el botón de reproducir de
    los controles. En el segundo ejemplo, tenemos un video que se
    reproduce automáticamente al cargar la página, en silencio y en
    bucle, iniciándose una y otra vez.

    Formatos de video soportados


    Antes de continuar con el modo avanzado de etiquetas de video,
    debemos conocer una serie de conceptos básicos y los diferentes
    formatos de video que existen actualmente. En primer lugar,
    debemos saber que un archivo de video tiene dos partes
    principales: el formato contenedor, que es el formato del video en
    sí, mientras que en su interior puede tener múltiples componentes
    codificados con diferentes codecs.
    Tablas básicas
    Las tablas más sencillas de HTML se definen con tres
    etiquetas: <table> para crear la tabla, <tr> para crear cada fila
    y <td> para crear cada columna.

    A continuación se muestra el código HTML de una tabla sencilla:


    <html>

    <head><title>Ejemplo de tabla sencilla</title></head>

    <body>

    <h1>Listado de cursos</h1>

    <table>

    <tr>

    <td><strong>Curso</strong></td>

    <td><strong>Horas</strong></td>

    <td><strong>Horario</strong></td>

    </tr>

    <tr>

    <td>CSS</td>

    <td>20</td>

    <td>16:00 - 20:00</td>

    </tr>

    <tr>
    <td>HTML</td>

    <td>20</td>

    <td>16:00 - 20:00</td>

    </tr>

    <tr>

    <td>Dreamweaver</td>

    <td>60</td>

    <td>16:00 - 20:00</td>

    </tr>

    </table>

    </body>

    </html>

    Si se visualiza el código anterior en cualquier navegador, se obtiene una


    tabla como la que muestra la siguiente imagen:
    Figura 7.2 Ejemplo de tabla sencilla creada con las etiquetas table, tr y td

    La etiqueta <table> encierra todas las filas y columnas de la tabla. Las


    etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y
    encierran todas las columnas. Por último, la etiqueta <td> (del
    inglés "table data cell") define cada una de las columnas de las filas,
    aunque realmente HTML no define columnas sino celdas de datos.

    Al definir una tabla, se debe pensar en primer lugar en las filas que la
    forman y a continuación en las columnas. El motivo es que HTML
    procesa primero las filas y por eso las etiquetas <tr> aparecen antes que
    las etiquetas <td>.

    Etiqueta
    <table>

    Atributos
    básicos, internacionalización y eventos
    comunes
    Etiqueta
    <table>

    Atributos  summary = "texto" - Permite describir el contenido de la tabla (lo utilizan los buscad
    propios las personas discapacitadas)

    Tipo de
    Bloque
    elemento

    Descripción Se emplea para definir tablas de datos

    Etiqueta
    <tr>

    Atributos
    básicos, internacionalización y eventos
    comunes

    Atributos
    -
    propios

    Tipo de
    Bloque
    elemento

    Descripción Se emplea para definir cada fila de las tablas de datos

    Etiqueta
    <td>

    Atributos
    básicos, internacionalización y eventos
    comunes
    Etiqueta
    <td>

     abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en


    Atributos
    navegadores utilizados por personas discapacitadas)
    propios
     headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta c
    títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de

     scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta ce
    su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás ce
    están en la misma columna

     colspan = "numero" - Número de columnas que ocupa esta celda

     rowspan = "numero" - Número de filas que ocupa esta celda

    Tipo de
    Bloque
    elemento

    Descripción Se emplea para definir cada una de las celdas que forman las filas de una tabla, es decir, las column
    tabla

    De todos los atributos disponibles para las celdas, los más utilizados
    son rowspan y colspan, que se emplean para construir tablas complejas
    como las que se ven más adelante. Entre los demás atributos, sólo se
    utiliza de forma habitual el atributo scope, sobre todo con las celdas de
    cabecera que se ven a continuación.

    Normalmente, algunas de las celdas de la tabla se utilizan como


    cabecera de las demás celdas de la fila o de la columna. En este caso,
    HTML define la etiqueta <th> (del inglés "table header cell") para indicar
    que una celda es cabecera de otras celdas.
    Etiqueta
    <th>

    Atributos
    básicos, internacionalización y eventos
    comunes

     abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en


    Atributos
    navegadores utilizados por personas discapacitadas)
    propios
     headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta c
    títulos de las columnas y filas). Se indica como una lista de ID de celdas

     scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta ce
    su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás ce
    están en la misma columna

     colspan = "numero" - Número de columnas que ocupa esta celda

     rowspan = "numero" - Número de filas que ocupa esta celda

    Tipo de
    Bloque
    elemento

    Descripción Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla

    Los atributos de la etiqueta <th> son idénticos que los atributos definidos
    para la etiqueta <td>. En este caso, el atributo más utilizado es scope,
    que permite indicar si la celda es cabecera de la fila o de la columna (<th
    scope="row"> y <th scope="col"> respectivamente).

    Por otra parte, HTML define la etiqueta <caption> para establecer la


    leyenda o título de una tabla. La etiqueta debe colocarse inmediatamente
    después de la etiqueta <table> y cada tabla sólo puede incluir una
    etiqueta <caption>.
    Etiqueta
    <caption>

    Atributos
    básicos, internacionalización y eventos
    comunes

    Atributos
    -
    propios

    Tipo de
    En línea
    elemento

    Descripción Se emplea para definir la leyenda o título de una tabla

    Ejercicio 11
    Determinar el código HTML necesario para crear la tabla que se muestra
    en la siguiente imagen:

    Figura 7.3 Tabla sencilla con celdas de cabecera


    Utilizar las celdas de cabecera donde sea necesario y añadir todos los
    atributos posibles.

    Solución:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o
    rg/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Ejemplo de tabla sencilla</title>

    </head>

    <body>

    <h1>Su pedido</h1>

    <table>

    <tr>

    <th scope="col">Nombre producto</th>

    <th scope="col">Precio unitario</th>

    <th scope="col">Unidades</th>

    <th scope="col">Subtotal</th>

    </tr>

    <tr>

    <td>Reproductor MP3 (80 GB)</td>


    <td>192.02</td>

    <td>1</td>

    <td>192.02</td>

    </tr>

    <tr>

    <td>Fundas de colores</td>

    <td>2.50</td>

    <td>5</td>

    <td>12.50</td>

    </tr>

    <tr>

    <td>Reproductor de radio &amp; control remoto</td>

    <td>12.99</td>

    <td>1</td>

    <td>12.99</td>

    </tr>

    <tr>

    <th scope="row">TOTAL</th>

    <td>-</td>

    <td>7</td>

    <td><strong>207.51</strong></td>

    </tr>

    </table>
    </body>

    </html>

    También podría gustarte