Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Un Poco de Historia de Html5

    Hochgeladen von

    Guillermo Carlos Hernández Hernández
    81 Ansichten8 Seiten
    El documento proporciona un resumen de la historia de HTML5. Comenzó como una colaboración entre el WHATWG y el W3C para mejorar HTML y permitir aplicaciones web más avanzadas. El W3C luego adoptó este trabajo como la nueva especificación HTML5. HTML5 incluye nuevas etiquetas semánticas como <header>, <nav>, <article> y <footer> para mejorar la estructura y accesibilidad de las páginas web.

    Originalbeschreibung:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    El documento proporciona un resumen de la historia de HTML5. Comenzó como una colaboración entre el WHATWG y el W3C para mejorar HTML y permitir aplicaciones web más avanzadas. El W3C luego adoptó este trabajo como la nueva especificación HTML5. HTML5 incluye nuevas etiquetas semánticas como <header>, <nav>, <article> y <footer> para mejorar la estructura y accesibilidad de las páginas web.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    81 Ansichten8 Seiten

    Un Poco de Historia de Html5

    Hochgeladen von

    Guillermo Carlos Hernández Hernández
    El documento proporciona un resumen de la historia de HTML5. Comenzó como una colaboración entre el WHATWG y el W3C para mejorar HTML y permitir aplicaciones web más avanzadas. El W3C luego adoptó este trabajo como la nueva especificación HTML5. HTML5 incluye nuevas etiquetas semánticas como <header>, <nav>, <article> y <footer> para mejorar la estructura y accesibilidad de las páginas web.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 8

    UN POCO DE HISTORIA DE HTML5 HTML 2.0 se convierte en la primera especificacin, que incluye el tag <code>img</code>.

    En 1999, el W3C publica la especificacin de HTML 4.01. No se incorporan nuevos elementos, pero se modifica la forma de escribirlos, segn el lenguaje XML, mucho ms estricto. En 2001, se publica la especificacin de XHTML 1.1. Xhtml 2 Comienzan los problemas El W3C da por muerto el lenguaje HTML, y comienza a trabajar en el nuevo XHTML 2. XHTML 2 era un lenguaje basado en un XML ms puro... pero no era compatible con anteriores versiones de HTML, ni con las pginas ya existentes. Y as, en 2004, naci el WHATWG. El WHATWG Un grupo de gente de Opera, con Ian Hickson a la cabeza, y ms tarde de Apple y Mozilla no estn conformes con el rumbo del W3C, y quieren potenciar las aplicaciones web. Crean un grupo de trabajo: el Web Hypertext Application Technology Working Group. Crean dos especificaciones, Web Forms 2.0 y Web Apps 1.0. Ms tarde, ambas se unirn para formar HTML5. En 2006, el W3C reconoce que su XHTML 2 no funciona, y comienzan a trabajar en un nuevo HTML, tomando como base el trabajo del WHATWG. En ese momento, el W3C estaba trabajando en el nuevo HTML 5, mientras que el WHATWG lo haca en el HTML5. Reconciliacin En 2009, el W3C renuncia definitivamente a seguir desarrollando XHTML 2. El WHATWG y el W3C siguen trabajando en el HTML5 en paralelo, pero con mtodos distintos. Recientemente, el WHATWG ha decidido dejar de numerar las versiones de HTML y sigue trabajando en el <a href="http://blog.whatwg.org/html-is-the-new-html5">"HTML Living Standard" En 2012, la especificacin tendr el status de "Candidate Recommendation". Probablemente, no ser "Proposed Recommendation" hasta 2022. Qu es DOCTYPE? Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debe ser el primer elemento que abra un documento. Esto quiere decir que debera preceder a <HTML>. Se trata de una marca que no necesita cierre y cuya funcin es facilitar informacin al servidor web que aloja la pgina. La informacin facilita por DOCTYPE se refiere al tipo de documento visualizado adems de ser necesaria para la comunicacin entre navegador y servidor. DOCTYPE se debe escribir de forma estndar: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> Esta lnea proporciona algunos datos sobre el documento: HTML PUBLIC: el documento es pblico IETF: el tipo de HTML pblico est gestionado por la Internet Engineering Task Force

    DTD HTML 4.0: la versin de HTML soportada es la 4.0 EN: el idioma del documento es el ingls El uso de DOCTYPE no es obligatorio y puede omitirse. Seguramente su uso ayuda al servidor web a interpretar correctamente el documento, pero su ausencia no condiciona la correcta visualizacin. Como se observa fcilmente, DOCTYPE es una marca que no prev elemento de cierre (no se escribe as: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>) charset Un charset es una norma, algo que define como se vern ciertos caracteres. Partamos con el charset mas extendido: UTF-8. Este usa Unicode y el charset por defecto en XHTML y XML. UTF-8 tiene la ventaja de codificar cualquier carcter, ya que usa el estndar unicode, que tiene la capacidad de codificar cualquier carcter, como se puede ver aqui. Las desventajas son que dependiendo de la 'distancia' del carcter, usaremos ms espacio al visualizarlo. HERRAMIENTAS DE VALIDACION DEL CODIGO HTML El Consorcio World Wide Web, ofrece un interesante servicio de validacin con el que mejorar el cdigo HTML de una pgina web. 01/06/2009 - Markup Validation Service es el nombre del servicio web ofrecido de forma libre por la W3C, la organizacin internacional que establece los estndares de programacin web. La validacin puede realizarse a partir de la URL de una pgina web, descargando el fichero desde nuestro ordenador o pegando un trozo del cdigo fuente. Tras el chequeo del cdigo conforme al estndar, recibiremos un listado de las lneas del cdigo HTML, XHTML, SMIL, MathML... que no cumplen con el mismo, junto con una descripcin del problema. En algunos errores, podremos encontrar una explicacin de la causa que lo provoca y su solucin. Markup Validation Service es un servicio gratuito al que cualquier interesado puede acceder desde validator.w3.org Nuevas etiquetas de HTML5 HTML4 y HTML5 son 100% compatibles entre s. Todo el cdigo que tienes en HTML normal seguir funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo nico que tienes que hacer es colocar este DOCTYPE4 antes de la etiqueta <html>: <!DOCTYPE html> Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.

    Las principales etiquetas HTML5 nuevas no tienen una representacin especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semntico superior a un simple div o span. 4 http://www.cristalab.com/tips/la-importancia-de-doctype-y-de-validar-xhtml-y-css-c57338l/ 5 http://www.cristalab.com/tutoriales/tutorial-basico-de-xhtml-c143l/ <header> Que hace la etiqueta div Hacer cosas como <div id=header> es un poco estpido cuando el 99% de los proyectos web tienen una cabecera. <header> est diseada para reemplazar la necesidad de crear divs sin significado semntico. <hgroup> Muchos headers necesitan mltiples ttulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. En el HTML actual, slo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO. <nav> Igual que <header>, <nav> est diseado para que ah coloques la botonera de navegacin principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. <section> Define un rea de contenido nica dentro del sitio. En un blog, sera la zona donde estn todos los posts. En un video de youtube, habra un section para el video, uno para los datos del video, otro para la zona de comentarios. <article> Define zonas nicas de contenido independiente. En el home de un blog, cada post sera un article. En un post del blog, el post y cada uno de sus comentarios sera un <article>. <aside> Cualquier contenido que no est relacionado con el objetivo primario de la pgina va en un aside. En un blog, obviamente el aside es la barra lateral de informacin. En el home de un peridico, puede ser el rea de indicadores econmicos. <footer>

    Este es obvio. Es el pie de pgina y todo lo que lo compone. Atencin <div> no est muerto: Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseo grfico o cualquier cosa que no tenga significado semntico. Slo usa las etiquetas semnticas de HTML5 donde sean necesarias.

    LA ETIQUETA DIV

    La etiqueta <div> se emplea para definir un bloque de contenido o seccin de la pgina, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque especfico. El uso de la etiqueta div es sencillo. Observemos este ejemplo: <div> <h1>ndice</h1> Pgina principal<br /> Material multimedia<br /> Autores<br /> </div> Hemos empleado la etiqueta para crear un bloque, que har las veces de ndice de contenidos. Visualmente la etiqueta no provoca ningn cambio, pero en la estructura interna del documento hemos aplicado una divisin muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.

    Probemos ahora a aplicar una modificacin a la apariencia de ese bloque, aadiendo un estilo de borde a la etiqueta <div>; quedara as: <div style="border: 2px solid rgb(204, 102, 204);"> <h1>ndice</h1> Pgina principal<br /> Material multimedia<br /> Autores<br /> </div> Observemos de nuevo la figura; ahora s que aparece un borde slido de 2 pxeles alrededor de todo el espacio definido por la etiqueta div.

    Eso es todo lo que necesitamos saber: la etiqueta <div> configura espacios dentro de la pgina.

    La etiqueta span
    Despus de un </div> se comienza con una nueva lnea. Esa es una de las diferencias principales con la otra etiqueta que empleamos para diferenciar contenidos, la etiqueta <span>. Con ella conseguimos un efecto similar, pero en el interior de un prrafo. Recordemos que span se emplea con frecuencia para aplicar estilos en el interior de un bloque de texto.

    Diferenciando las etiquetas div y span


    Adicionalmente, las etiquetas div y span se suelen acompaar de uno o dos parmetros destinados a identificar ese bloque:

    id: permite establecer un identificador nico para el bloque. As podremos referirnos al bloque de forma inequvoca. class: es similar a id, pero con la ventaja de que se puede repetir; as que podemos tener varios <div> diferentes con la misma clase.

    Usando id y class podemos diferenciar unos div de otros y as aplicarles estilos CSS diferentes o hacer que acten de forma distinta. Las etiquetas id y class se utilizan como se muestra en el ejemplo: <div id="indice"> <br>ndice </div> <div class="destacado"> Este texto se destaca mediante un estilo. </div> <div id="articulo15" class="articulos_estandar"> Texto de un artculo </div> Como se puede apreciar, las etiquetas id y class se pueden mezclar. Se mantiene siempre esa norma: los id son nicos dentro de una pgina, mientras que los class se suelen repetir para que varios elementos tomen un mismo estilo.

    ETIQUETA DE ENCABEZADOS Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el ttulo del artculo, categora, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>. Esta etiqueta viene acompaada de un nmero, desde el 1 hasta el 6, predefiniendo stos el tamao del encabezado. As, <h1> sera el encabezado ms grande mientras que <h6> sera el ms pequeo. A continuacin vamos a mostraros el cdigo de los seis diferentes encabezados: <h1> Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo ms grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeo</h5> <h6>Texto muy pequeo</h6>

    Das könnte Ihnen auch gefallen