Curso de HTML5: Estructura Básica

Cambios en la estructura de un HTML5 respecto a HTML4 y XHTML1

A continuación se verán los principales cambios de la estructura básica o el esqueleto de una página HTML5, con comentarios HTML 😉
<!DOCTYPE html>
<!– Lo primero que llamará la atención es el hecho del nuevo doctype simple y efectivo–>
<html lang=«ES-es»>
<!– el idioma definido de manera clara dentro de la etiqueta html–>
    <head>
       <title>Documento HTML</title>
        <!– se acabó el content-type, bienvenido el charset para definir la codificación del fichero –>
       <meta charset=«UTF-8»>
       <meta name=«autor» content=«David Vaquero» />
       <meta name=«copyright» content=«dvaquero.blogspot.com» />
        <!– adios a los type en los scripts y en los estilos 🙂 –>
       <script src=«init.js»></script>
       <script>
       
       </script>
       <link rel=«stylesheet» href=«estilo.css» media=«screen» />
       <style>
        *{
       
        }
    </style>
    </head>
    <body>

       <!– nueva etiqueta heder para identificar la cabecera –>

       <header>
       <img src=«logo.jpg» />
        <!– agrupaciones de H’s –>
       <hgroup>
      <h1>Empresa .com</h1>
      <h2>Somos los mejores en lo que hacemos</h2>
       </hgroup>
        <!– nuevo etiqueta nav para los menús y sistemas de navegación por el sitio y la página –>
      <nav id=«mainmenu»>
      <ul>
      <li><a href=«estructura_base.html»>Estructura base</a></li>
      <li><a href=«fundamentos.html»>Fundamentos</a></li>
      <li><a href=«video.html»>Video</a></li>
      <li><a href=«form.html»>Formulario</a></li>
      <li><a href=«canvas.html»>Canvas</a></li>
      </ul>
      </nav>
       </header>
       
       <div id=«content»>
        <!– el contenido se organizará en artículos y secciones –>
       <article>
      <section id=«titulos»>
      <hgroup>
      <h1 class=«clase»>Titulo</h1>
      <h2>Sub Titulo</h2>
      <h3>Sub sub titulo</h3>
      </hgroup>
      </section>
      <section id=«explicacion»>
      <p id=«iden»>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
      </p>
      <p id=«aviso» class=«clase»>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
      </p>
      </section>
       
       </article>
        <!– aside representará el contenido adosado al contenido principal –>
       <aside>
       <section id=«tablas_relacionadas»>
      <table class=«clase» border=«2»>
      <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      </tr>
      <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      </tr>
      <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      </tr>
      </table>
      </section>
       </aside>
       </div>
       <!– el pie ya tiene su etiqueta –>
       <footer>Copyright by Pepesan 2013</footer>
    </body>
</html>

Comments

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Categorías de Cursos

RSS Cursos de Desarrollo

  • Introducción al Testing Web 10/02/2020
    Hemos publicado en nuestro canal de Youtube un vídeo grabado durante las clases de un curso de Python Avanzado. El tema es el de Testing Opensource hablado sobre la teoría de Testing, indicando los distintos tipos de pruebas e identificando las herramientas que se usan a la hora de probar una web.
  • Entrevista a Alejandro López CEO de Slimbook 10/02/2020
    Esta semana hemos entrevistado en República Web, a Alejandro López, CEO de Slimbook. Hablamos de sus productos y sobre equipos para desarrolladores, diseñadores web, fotógrafos, editores de vídeo y data scientist. Te lo vas a perder?
  • Gadgets para el formador itinerante: Router Wifi de Viaje 08/02/2020
    Muchas veces los formadores y profesionales itinerantes tenemos el problema de tener que conectarnos a Internet desde hoteles o cafeterías para seguir haciendo nuestro trabajo, en esta entrada veremos un router wifi de viaje muy interesante que he estado utilizando desde hace un tiempo y que me ha dado muy buenos resultados. Como todo en […]
  • Balanceadores de Carga 27/01/2020
    Dentro de la arquitectura web necesitamos cumplir con dos condiciones si queremos que nuestra arquitectura sea suficientemente sólida: Alta Disponibilidad y Alto Rendimiento, en esta entrada veremos cómo cumplir con estos dos principios. La alta disponibilidad trata de conseguir que un servicio tenga el máximo posible de tiempo de disponibilidad, es decir, que el servicio […]
  • Serie de Artículos de Docker 13/01/2020
    En esta entrada veremos cómo manejar Docker, en una serie de artículos explicativos. No te los pierdas He instalado Docker, ¿Y ahora qué? Docker Compose, para cuando quieres arrancar varios contenedores de manera coordinada
  • ¿Que Frameworks de Frontend son los más utilizados en el millón de páginas del Top de Alexa? 09/01/2020
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Artículos de administración de Servidores 08/01/2020
    Esta serie de artículos nos permiten saber cómo se instala y se configura un servidor desde cero: Nuevo Servidor NAS reciclado Acceso a servidor de la oficina desde fuera gracias a dinaip Configuración de un firewall de manera sencilla en Debian/Ubuntu
  • ¿Cuál es el uso de WordPress en los principales sitios de Internet según Alexa? 14/12/2019
    Empezamos con nuestra serie de publicaciones sobre tecnologías concretas que más se usan en Internet, en este caso con WordPress. ¿Quieres saber cómo es de importante y cuánto se utiliza? No te pierdas esta entrada.
  • Estudio de Uso de Tecnologías en el millón de páginas más vistas según Alexa 13/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Configuración de un firewall de manera sencilla en Debian/Ubuntu 08/12/2019
    Uno de los problemas principales a la hora de asegurar un servidor es la de filtrar el tráfico de entrada y de salida del mismo, asegurando así que todas las conexiones entrantes y salientes están controladas y sabemos desde donde podemos entrar a los servicios que queremos y no desde donde no queremos. En esta […]

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies