Scribd Logo
Upload

Welcome to Scribd!

  • Sesion 03 - HTML

    Uploaded by

    Jesús Moreno Plasencia
    35 views54 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    35 views54 pages

    Sesion 03 - HTML

    Uploaded by

    Jesús Moreno Plasencia

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 54

    Estructura central de la pgina. Presentacin visual. Herramientas graficas. Compatibilidad con Rich media . Mejoras de JavaScript.

    Rich Media: Forma de comunicacin interactiva que incorpora animacin, sonido, video y/o interactividad.

    HTML5 introduce nuevos elementos que permiten mantener un mayor control sobre el cdigo. De manera general, los nuevos elementos cubren las siguientes funciones: Crear bloques de contenido en una pgina. Manejar medios. Estructurar formularios. Por lo general, para crear bloques de contenidos en HTML utilizamos tablas complejas o el tristemente celebre DIV.

    Tipo de Documento
    <!DOCTYPE html>
    Esto informa al navegador que el cdigo utilizado es HTML5. Esta declaracin puede ir en maysculas o en minsculas.

    Lenguaje de Documento
    <html lang=ES >
    Esto establece el idioma del documento o de una parte de texto. Para nuestro caso el lenguaje predeterminado es el Espaol.

    <header></header>
    Representa una grupo de artculos introductorios o de navegacin. Se debe utilizar para marcar la cabecera de una pgina. El elemento header puede estar anidado en otras secciones de la pgina ( es decir que no solo se utiliza para la cabecera de la pgina).

    <hgroup></ hgroup >


    Es usada para agrupar un conjunto de elementos h1 h6, bsicamente esta etiqueta nos sirve para poder hacer un grupo de cabeceras dentro de una pagina web.

    <nav></nav>
    Representa una parte de una pgina que enlaza a otras pginas o parte dentro de la pgina. Es una seccin con enlaces de navegacin.

    <section></section>
    Se utiliza para representar una seccin general dentro de un documento o aplicacin, como un capitulo de un libro. Puede contener subsecciones y si lo acompaamos de h1 h6 podemos estructurar mejor toda la pgina creando jerarquas del contenido.

    <articule></articule>
    Representa un componente de una pgina que consiste en una composicin autnoma en un documento, pgina, aplicacin o sitio web con la intencin de que pueda ser reutilizado y repetido.

    <aside></aside>
    Representa una seccin de la pgina que abarca un contenido que lo rodea, por lo que se puede considerar un contenido independiente. Puede utilizarse para elementos publicitarios, barras laterales u otro contenido que se considere separado del contenido principal de la pgina.

    <footer></footer>
    Representa el pie de una seccin, con informacin acerca de la pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor, el copyright o el ao.

    Tendremos como resultado en este ejemplo una pagina en blanco con la descripcin que hemos escrito en el cuerpo de la pagina. Ahora bien veamos una comparacin de la estructura de una pgina web tradicional con el uso de contenedor de rea hecha por el muy famoso tag DIV, con las nuevas etiquetas que nos ofrece HTML5.

    Con estas nuevas etiquetas no quiere decir que ya no se use <div>. DIV siempre debe usarse cuando necesites una caja con objetivos de diseo grafico o cualquier otra cosa que no tenga significado semntico. Se debe usar las etiquetas semnticas de HTML5 donde sean necesarias.

    <dialog></ dialog >


    Con frecuencia encontramos conversaciones y comentarios en la web. Ahora, con esta etiqueta podemos identificarlos, esta divida en tres partes: DIALOG: identifica una conversacin o comentario. DT: Identifica al interlocutor. DD: Identifica el dilogo o comentario.

    <figure></ figure >


    Identifica una imagen y su descripcin como parte de un conjunto. A este conjunto se le conoce como figure group o grupo de imgenes.

    FIGURE contiene una etiqueta adicional (LEGEND), a travs de la cual se identifica el texto que se quiere asociar con la imagen.

    <mark></mark >
    Esta etiqueta nos sirve para resaltar o remarcar un texto, pero esta vez con un efecto de Marca Textos, como si hubieses seleccionado algo importante en el texto de tu libro.

    <progress></progress >
    Con esta etiqueta podemos representar el progreso de cualquier evento. Por ejemplo podemos mostrar el progreso de la descarga de una imagen, un archivo o la transferencia de datos.

    Uno de los principales cambios en los formularios HTML5 es la aparicin de nuevos atributos para la etiqueta central de entrada INPUT. Veamos: type=search: Permite especificar un elemento de bsqueda. type=number: Para sumar o restar nmeros mediante botones. type=range: Para seleccionar un valor entre dos valores predeterminados.

    type=color: Para seleccionar un color. type=tel: Campo para nmeros de telfono. type=url: Permite escribir una direccin Web. type=email: Campo para direcciones electrnicas. type=date: Calendario para seleccionar un da. type=time: Campo para las horas y minutos.

    HTML5 nos ofrece un nuevo elemento llamada <output>. Este se incorporo para representar el resultado de un calculo. Atributos del elemento Output
    Atributo name for form Descripcin Nombre del elemento Indicamos una lista de IDs de los elementos que entran en el clculo. Asociamos el elemento output en un formulario.

    Oninput: evento aun no compatible con ciertos navegadores, se utiliza para que mientras se ingresen datos se muestren de forma automtica.

    Otra gran novedad del lenguaje HTML5 es el atributo autofocus, que permite insertar el cursor automticamente en un campo predeterminado, no tiene valor y slo puede utilizarse una vez en un mismo formulario.

    Para que un campo de un formulario sea obligatorio, basta con utilizar el atributo required, no tiene valor, puede ser usado en varios campos dentro de un formulario .

    Otro atributo es el marcador de posicin de texto placeholder. En el interior del recuadro aparece un texto predefinido, que al momento de escribir dentro de el desaparece. Ejm: motor de bsqueda de Firefox.

    Generalmente para crear una lista desplegable en un formulario Web utilizamos una etiqueta SELECT. Con HTML5 podemos ampliar un valor de entrada y convertirlo en una lista desplegable. Para ello necesitamos la etiqueta DATALIST que nos permita formar un grupo y asociarlo a un elemento de entrada INPUT.

    HTML5 nos ofrece esta nueva etiqueta con la cual podemos resaltar informacin adicional de pgina. Con el cual se pude tanto contraer como expandir la informacin que adjuntemos a la misma.

    You might also like