Índice
Con este primer artículo de introducción a HTML5, presentamos una serie de artículos a modo de curso cuyo autor, al que agradezco su interés por colaborar en el blog, es Roberto. Si ya sabes algo puedes echar un vistazo al artículo Ejemplos en HTML5: Almacenamiento Web, SQL y WebSocket.
Un poco de historia
Como bien indica su propio nombre es la 5 versión del estándar de WWW (World Wide Web), el W3C a estado años trabajando en este nuevo estándar despuesdespués del XHTML, el cual se puede denominar como uno de sus fracasos, al tener un lenguaje muy estricto, y no ser compatible con la mayoría de las webs publicadas en el momento del lanzamiento, esta nueva versión sí es compatible con todas las anteriores, ademas de incorporar nuevas mejoras, algunas de las novedades que mas ruido han hecho ha sido la desaparición del case sensitive, con lo que podemos escribir por ejemplo la etiqueta ID de un div en mayúsculas o minúsculas y que los navegadores lo reconozcan sin producir error, aun así se recomienda seguir unos estándares, como son el de escribir todos los elementos en minúsculas, y sus valores entre comillas dobles “”, aunque en esta versión sean validas las comillas simples ”; también se recomienda cerrar todas las etiquetas, aunque no sea obligatorio como en XHTML; así mismo también incluye nuevas funciones como la reproducción de vídeo y sonido, y algunas etiquetas nuevas, para ello hicieron un estudio sobre el nombrado de etiquetas de las webs mas famosas, y casi todas tenían una barra lateral, llamada aside,un encabezado llamado header, y un pie llamado footer, así como las barras de navegación nav; y un largo etc.
¿Por dónde empezar?
Lo primero que debemos saber es que HTML sea cual sea su versión no es un lenguaje de programación, tan solo es un lenguaje de marcas, se usan una serie de etiquetas estandarizadas, HTML se usa para crear la estructura de una web, y se ha puesto de moda para las aplicaciones móviles, gracias a Frameworks como PhoneGap a esta moda se a sumado Mozilla, con su S.O. Firefox OS; así que como podemos comprobar es casi obligatorio como mínimo conocerlo sea cual sea la plataforma a la que queramos desarrollar; como he dicho nos sirve para dar la estructura a una web (el esqueleto) después podremos darle colores, formas y organizarlo con las hojas de estilo en cascada (CSS) y se recomienda usar su ultima versión CSS3, aunque esta es otra batalla de la que hablaremos en otra ocasión; ahora que sabemos que es, y para que sirve, es el momento de conocer la etiqueta que debe aparecer en cualquier documento HTML5.
Con esta etiqueta decimos que el documento es una pagina web HTML5; como vemos es muy sencilla, incluso nos la podemos aprender a diferencia de su antecesor HTML4.
ó
según fuera tradicional o estricto, no vamos a entrar en las diferencias ya que esto hoy en día a pasado a la historia.
Todo el que empieza en esto esta deseando ir al código escribir su primera pagina web y verla funcionando. Esto se puede lograr con una estructura básica como la siguiente:
El contenido de la pagina
A esta estructura le podemos dar “vida” simplemente abriendo nuestro blog de notas, y pegándolo, dándole el nombre que deseemos y la extensión html. Después de eso si la abrimos con cualquier navegador podemos verla funcionando.
Ahora os explicare qué es cada etiqueta, la primera: el Doctipe, ya la conocemos, seguidamente tenemos una etiqueta ; que cierra al final del documento podemos intuir que hay que incluir dentro todo el contenido html y justamente es así como funciona debemos escribir dentro todo el contenido de nuestra página, la siguiente etiqueta es el allí debemos incluir los enlaces a nuestras hojas de estilo, etiquetas de metadatos (mas adelante veremos que son y para que sirven), el titulo de la página, este se incluye dentro de las etiquetas y como vemos en la imagen superior lo que escribamos aquí va a aparecer en la pestaña de nuestra pagina; se debe cerrar con ; seguidamente nos encontramos con aquí es donde escribiremos todo el cuerpo de nuestra web.
Estas son las etiquetas básicas, el body podemos complicarlo todo lo que queramos o necesitemos añadiendo tantas etiquetas conocidas como divisiones, o capas, y dentro de cada una meteremos el contenido que deseemos, imágenes, texto, vídeo…
Etiquetas de HTML5
Las etiquetas mas usadas son:
- <html>: ya la conocemos; es la raíz de cualquier pagina, y todos los demás elementos deben descender de él.
- <head>. Es la cabecera de la pagina, en ella incluiremos todos los enlaces a documentos externos y metadatos
- <title>: es el titulo de la pagina.
- <link> la usaremos para enlazar a documentos JS(Java Script) y CSS.
- <meta>: define algún metadato, como las palabras clave, descripción de la pagina, etc
- <body> Dentro de él tendremos el contenido de la página
- <section> Nueva etiqueta solo disponible en paginas HTML5 y define una sección de la página
- <nav> también es nueva en HTML5 se utiliza para contener los enlaces de navegación
- <article> es otra de las novedades de la ultima versión del HTML aquí escribiremos los artículos, lo cual viene siendo algo que no tiene necesariamente que ver con el resto de la web.
- <hx> sustituiremos la X por un numero desde el 1 al 6 se usa para definir encabezados, cuanto mas bajo sea el numero mas importante sera el encabezado, por lo que <h1> es mas importante que <h2> predefinido por nuestros navegadores disminuye la fuente de cada <hx> según aumente el numero por lo que <h2> tendrá una fuente (tamaño de letra) mayor que un <h3>, lo suyo es mantener esta concordancia aunque podemos editarlo desde nuestras hojas de estilos.
- <header> nuevo elemento del HTML5 aquí escribiremos la cabecera de la pagina, normalmente es el lugar donde se coloca el logo, titulo de la web, y menú de navegación
- <footer> también hemos hablado de el antes, es otro de los nuevos elementos del HTML5 y como su nombre indica es el pie, generalmente de la pagina en la que este declarado, pero también es correcto usarlo para escribir cualquier otro pie que pueda aparecer en la pagina, por ejemplo el pie de un articulo, en donde podríamos colocar el nombre del autor que lo escribió
- <p> lo que pongamos en su interior se mostrara como un párrafo
- <hr> indica una separación entre secciones, artículos, o algún contenido, visualmente lo veremos como una linea horizontal
- <ol> define una lista ordenada normalmente se visualizaran con un numero delante de cada elemento
- <ul> define una lista sin orden
- <li> se incluye dentro de cualquiera de los 2 elementos anteriores, son los elementos de la lista.
- <figure> Nuevo elemento en HTML5 cada vez mas usado, se utiliza para incluir una imagen en su interior
- <img> aquí declararemos la imagen que queremos mostrar
- <div> la etiqueta mas usada, podemos sustituir casi cualquiera de las anteriores por esta, hasta la aparición del HTML5 se solían incluir todas las divisiones de la web con esta etiqueta y se le daban distintos estilos, según se fuera a usar, aun así, se recomienda no usarla si existe otra etiqueta mas moderna que haga lo que queremos hacer.
- <a> una de las etiquetas mas utilizadas, se utiliza para definir enlaces, ya sean interiores(dentro de las misma web) o exteriores (hacia otras webs)
- <mark> cada vez mas utilizada es otra de las novedades HTML5 se utiliza para resaltar una parte de la pagina.
- <span> muy usado para dar un estilo distinto a alguna parte de un párrafo
- <iframe> se utiliza para insertar un contenido dentro de la pagina, ya sea un vídeo (si quisiéramos insertar un vídeo de YouTube esta seria la etiqueta) u otra pagina, así como cualquier otro contenido externo a nuestra pagina y que necesitemos se visualice en ella.
- <embed> muy similar al anterior, pero con algunas mejoras, es otra de las novedades del HTML5
- <vídeo> es la etiqueta que usaremos para visualizar un vídeo en nuestra web
- <audio> exactamente lo mismo que la anterior, pero para audio, ambas son novedades del HTML5.
- <canvas> es una capa especial para imágenes,(bitmaps) es utilizada para dibujar, especial para juegos e imágenes en movimiento
- <table> como su nombre indica se usa para incluir tablas en la pagina, no se aconseja usarla
- <tr> representa una fila de la tabla
- <td> representa una celda de la tabla
- <form> se usa para crear formularios, desde los cuales introduciremos datos, y ejecutaremos ciertas funciones.
- <label> dentro de los formularios suele usarse para sacar un texto estático, el típico que aparece encima de la ya estándar caja de texto blanca que dice teclee su nombre.
- <input> tenemos gran variedad de campos en artículos posteriores hablaremos de ellos, pero todos ellos sirven para interactuar con el usuario, ya sean un checkbox (la cajita blanca que marcaremos con un check); campos de texto para introducir nuestro nombre, teléfono, etc…
- <select> es el desplegable con distintas opciones que todos hemos visto para seleccionar nuestro país por ejemplo.
- <option> cada una de las opciones del <select>
- <textarea> es un campo de texto con varias lineas para escribir un texto extenso. Estas son las mas usadas, y estandarizadas, podemos ver todas desde multitud de webs, una buena de referencia es la de Mozilla.
Referencias
- Referencia etiquetas HTML5 »» developer.mozilla.org
¿Has visto algún error?: Por favor, ayúdame a corregirlo contactando conmigo o comentando abajo.