Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Semana 04 - Introducción A Html5

    Cargado por

    Ricardo Pisco
    9 vistas25 páginas

    Título original

    Semana 04 - Introducción a Html5

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, 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 PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    9 vistas25 páginas

    Semana 04 - Introducción A Html5

    Cargado por

    Ricardo Pisco

    Copyright:

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

    INTRODUCCIÓN A HTML5

    SEMANA 04 - DISEÑO Y DESARROLLO WEB


    LIC. RICARDO PISCO
    ¿QUÉ ES HTML5?
    • HTML5 (HyperText Markup Language, versión 5) es la quinta
    revisión del lenguaje HTML. Esta nueva versión (aún en
    desarrollo), y en conjunto con CSS3, define los nuevos estándares
    de desarrollo web, rediseñando el código para resolver problemas
    y actualizándolo así a nuevas necesidades. No se limita solo a
    crear nuevas etiquetas o atributos, sino que incorpora muchas
    características nuevas y proporciona una plataforma de desarrollo
    de complejas aplicaciones web (mediante los APIs). Esta versión
    nos permite una mayor interacción entre nuestras páginas web y
    el contenido media (video, audio, entre otros) así como una mayor
    facilidad a la hora de codificar nuestro diseño básico.
    Algunas de las nuevas características de HTML5
    serían:
    • Nuevas etiquetas semánticas para estructurar los documentos HTML,
    destinadas a remplazar la necesidad de tener una etiqueta <div> que
    identifique cada bloque de la página.
    • Los nuevos elementos multimedia como <audio> y <video>.
    • La integración de gráficos vectoriales escalables (SVG) en sustitución de
    los genéricos <object>, y un nuevo elemento <canvas> que nos permite
    dibujar en él.
    • El cambio, redefinición o estandarización de algunos elementos, como
    <a>, <cite> o <menu>.
    • MathML para fórmulas matemáticas.
    • Almacenamiento local en el lado del cliente.
    FÁCIL DE COMENZAR
    • "Actualizar" a HTML5 puede ser tan simple como cambiar su tipo de
    documento. El tipo de documento debe estar en la primera línea de
    cada página HTML. Las versiones anteriores de HTML definen un
    montón de doctypes, y elegir el más adecuado puede ser difícil. En
    HTML5, sólo hay un tipo de documento:
    • <!DOCTYPE html>
    • La actualización al doctype HTML5 no rompe el marcado existente,
    ya que los elementos obsoletos previamente definidas en HTML 4
    todavía se representará en HTML5. Pero le permitirá usar (y
    validar) nuevos elementos semánticos como <article>, <section>,
    <header> y <footer>.
    SEMÁNTICA
    • Una de las novedades que hemos mencionado anteriormente son las
    etiquetas que se han introducido en HTML5. Existen más de 30 nuevas
    etiquetas semánticas que pueden ser utilizadas en nuestras páginas
    estáticas. Estas nuevas etiquetas se podrían clasificar en dos grupos:
    • Etiquetas que extienden a las actuales, como <video>, <audio> o
    <canvas>, y que además añaden nuevas funcionalidades a los
    documentos HTML, que podemos controlar desde JavaScript y
    • etiquetas que componen la web semántica, es decir, que no proponen
    nuevas funcionalidades pero sirven para estructurar sitios web, y añadir
    un significado concreto, más allá de las etiquetas generales como
    <div>.
    Declaración documento html5
    • Para indicar que nuestro documento es un documento html5,
    simplemente empezaremos antes que nada escribiendo la
    declaración <!DOCTYPE HTML>
    • <!DOCTYPE HTML>
    • <html>
    • ...
    • </html>
    La declaración de codificación de caracteres por
    defecto será: <meta charset=”UTF-8”>
    • <!DOCTYPE HTML>
    • <html>
    • <head>
    • <meta charset="UTF-8">
    • <title> MI PRIMER TÍTULO</title>
    • </head>
    • <body>
    • Contenido...
    • </body>
    • </html>
    Nuevos elementos incorporados en HTML5
    • En html5 se incorporan nuevos elementos como por ejemplo: Para crear la
    estructura de la página como las cabeceras <header>, menús de
    navegación <nav>, secciones <section>, pies de página <footer>, etc.
    • Para insertar elementos multimedia como audio <audio>, video <video>, etc.
    • Se agregan elementos como el svg para gráficos vectoriales y también el
    elemento canvas.
    • Para los formularios tenemos nuevos campos como selectores de fecha,
    colores, campos de url, etc.
    • Otras nuevas en html también son las barras de progreso, los apis de
    geolocalización, almacenamiento local, etc. En html5 ahora es posible
    arrastrar y soltar elementos.
    Elementos HTML eliminados en HTML5
    • En html5 también se han eliminado elementos como <basefont>,
    <big>, <center>, <Font>, <tt> cuyas tareas se pueden ejecutar
    con css. Otros como <acronym>, <applet>, <dir>, <strike>,
    también se han ido y en vez podemos utilizar <abbr>, <object>,
    <ul>, <del> respectivamente. También <iframe>, <frameset>,
    <noframes> han sido removidos.
    • En todo caso casi todo estos ya no los vimos en el curso de
    HTML, pero no está demás mencionarlo. Además aún existen
    muchas páginas en cuyo código todavía existen estos elementos
    y aun alguno puede funcionar, ¡pero venga ya! Están eliminados.
    Categorías de contenido
    • En html5 existen varias clases, • Los contenidos metadato:
    tipos, modelos o categorías de • Pertenecen a esta categoría los
    contenido. Dependiendo de las elementos HTML como son:
    características, la función que • <style>
    desempeñan y cómo se • <script>
    comporta un determinado • <meta>
    elemento, esta pertenecerá a • <title>
    una categoría.
    • <base>
    • Así podemos clasificar los • <comand>
    elementos HTML en varios • <link>
    modelos de contenido.
    • <noscript>
    • Los contenidos metadato se caracterizan por contener
    información de tipo metadato, los metadatos determinan la
    manera en la que se comportan, actúan, aparecen, los
    elementos del documento HTML.
    • Además estos contenidos metadatos generalmente están en el
    encabezado y también son capaces de establecer
    comunicación con otros documentos relacionados o externos.
    Los contenidos interactivos:
    • En esta categoría podemos encontrar a aquellos creados para
    la interacción con el usuario, tales como los enlaces, botones,
    campos de entrada de texto, audios, vídeos, etc.

    • <a>
    • <audio>
    • <video>
    Los contenidos incrustados:
    • Se refiere a los elementos como
    • <audio>
    • <video>
    • <canvas>
    • <img>
    • <math>
    • <svg>
    • <object>
    • estos elementos importan recursos en nuestro documento.
    Los contenidos de título o encabezado:
    • Elementos como <h1>, <h2>, <h3>, <h4>, <h5>, <h6> y
    <hgroup>, contienen encabezados o títulos, además poseen
    jerarquía.

    • Los contenidos de expresión o fraseo:


    • Tales como <span>, <strong>, <br/>, <small>, <sub>
    prácticamente son elementos en línea.
    Los contenidos de seccionamiento:
    • Se refiere a los elementos que limitan y definen el alcance de
    elementos como la cabecera, el cuerpo, el pie u otras
    secciones de la página.

    • Pertenecen a esta categoría elementos como <article>,


    <aside>, <nav> y <section>.

    • Contenido o categoría de flujo:


    • Pertenecen a esta categoría la mayoría de los elementos HTML
    Contenidos relacionados a formularios:
    • Pertenecen a esta categoría los elementos que están
    relacionados a los formularios: <form>, <imput>, <textarea>,
    etc.
    • Dependiendo de la manera en la que se usa un elemento
    HTML, un mismo elemento puede ser por ejemplo un contenido
    de flujo, incrustado o interactivo. Es decir un elemento puede
    pertenecer a más de un tipo de contenido.
    Estructura de una pagina HTML5
    • La estructura de una página HTML5 está conformada por una
    variedad de elementos que adquieren un alto valor semántico
    en comparación a las anteriores versiones de HTML, ahora
    contamos con nuevas etiquetas que poseen significado para
    estructurar adecuadamente una pagina web con HTML5, y en
    esta lección aprenderemos a utilizarlos.
    A continuación conozcamos las nuevas etiquetas destinadas
    para crear una estructura de página HTML5.
    • <header.- contiene la cabecera
    • <nav>.- contiene una barra de
    navegación o lista de
    hipervínculos.
    • <aside>.- puede ser un sidebar o
    un bloque de contenido secundario
    • <article>.- el contenido principal
    • <section>.- secciones de la pagina
    • <Footer.- el pie de página.
    Elemento <header>
    • El elemento <header> • <!DOCTYPE html>
    • <html>
    prácticamente contiene el
    • <head>
    encabezado donde puede ir
    • <title>Título Gatos</title>
    elementos como el logo, el nombre
    • </head>
    del sitio y elementos apropiados
    • <body>
    para el encabezado.
    • <header style="background-color:red;">
    • <header> se usa dentro de <body> • <img id="logo" src="gatito.jpg" width="100px"
    height="100px"/>
    • <head> y <header> son muy • <h1>SITIO WEB DE GATOS</h1>
    diferentes, no confundir. • <p>Un sitio web genial los amantes de gatitos</p>
    • </header>
    • </body>
    • </html>
    Elemento <nav>
    • Este elemento contiene • <nav>
    un conjunto de enlaces o • <ul>
    hipervínculos para la • <li><a href="url">Inicio</a></li>
    • <li><a
    navegación, para ir de href="url">Nosotros</a></li>
    una página o sección a • <li><a
    otra fácilmente. href="url">Servicios</a></li>
    • <li><a
    href="url">Contacto</a></li>
    • </ul>
    • </nav>
    • <article>

    Elemento <article> • <h1>Los gatitos</h1>


    • <p>Los gatitos son animales mamíferos que pertenecen a la
    familia de felinos...</p>
    • <h2>Qué hacen los gatitos</h2>
    • <p>Los gatitos hacen las siguientes actividades</p>
    Básicamente <article> es un • <ul>
    elemento semántico y su • <li> Maullan</li>
    contenido será un contenido • <li>Juegan</li>
    autónomo e independiente, • <li>Cazan ratones </li>
    posee sentido por sí solo. • <li>Duermen roncando</li>
    • </ul>
    • <h2>Razas de gatitos</h2>
    • <p>Existen varias razas de gatitos, a continuación nombramos
    algunos:</p>
    • <ul>
    • <li> Abisinio</li>
    • <li>American Curl</li>
    • <li>Bengalí </li>
    • <li>Bombay</li>
    • </ul>
    • </article>
    Elemento <section>
    • Elemento que contiene una sección, parte o pieza de un
    contenido. También es un contenido semántico. Los elementos
    que están dentro de <section> están relacionados entre si.
    Para formar un contenido con significado propio.
    • Elemento <aside>
    • En <aside> está el contenido secundario, y no es precisamente
    parte del contenido principal.
    • Si <aside> se pone dentro de <article>, entonces se puede
    entender que <aside> es un contenido complementario, pero
    que ya no forma parte del contenido principal.
    • El elemento <aside> podrían ser los sidebar, las barras
    laterales que algunos sitios web presentan o publicidad,
    banners, o elementos simplemente complementarios.

    • En fin los elementos <article>, < section>, <aside> son


    considerados semánticos, pues le dan significado al contenido
    que engloban y utilizarlos correctamente es muy importante,
    como por ejemplo, para que los motores de búsqueda
    entiendan y muestren correctamente y en las mejores
    posiciones o en fin para el seo, optimización y mantenimiento.
    Elemento <footer>
    • Este elemento prácticamente contiene el pie de página, dentro
    pueden ir como por ejemplo iconos de redes sociales, datos de
    contacto, términos del servicio, etc.
    • Dependiendo de nuestros objetivos y expectativas podemos
    utilizar otros elementos html dentro de los elementos <header>,
    <nav>, <footer>.

    También podría gustarte