Desarrollo Web

TECNOLOGIA UNIVERSIDAD

INTRODUCCIÓN

HTML 5

Como bien indica su propio nombre es la 5 versión del estándar de WWW (World Wide Web), elW3C 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ónCSS3, 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.

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:

<!DOCTYPE html> 
   <html>
      <head>
         <title>Titulo de nuestra pagina</title> 
      </head> 
   <body> El contenido de la pagina </body> 
</html>

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.

 

 

(Puede quitar la publicidad ampliando la cuenta)