HTML

(Alba Corcobado, Jorge González, Sara Félix, Irene Carmona y Lara Sánchez)

HTML, cuyo significado es Hyper Text Markup Language (Lenguaje de Marcado para Hipertextos), es el lenguaje más utilizado en la Web para desarrollar páginas web. Se trata del elemento de construcción más básico de una página y se usa para crear y representar visualmente un sitio web. Determina el contenido de la web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript).

HTML le da “valor añadido” a un texto estándar en español. Hiper Texto se refiere a enlaces que conectan una página Web con otra, ya sea dentro de una página web o entre diferentes sitios web. Los vínculos son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a páginas de otras personas, te haces participante activo de esta Red Mundial[1].

HTML fue creado por Berners-Lee a finales de 1991, pero “HTML 2.0” fue la primera especificación HTML estándar que fue publicada en 1995. HTML 4.01 fue una versión principal de HTML, la cual fue publicada a finales de 1999. Aunque la versión HTML 4.01 es ampliamente utilizada, actualmente cobra importancia la versión HTML-5, que es una extensión de HTML 4.01, y esta fue publicada en 2012[2].

Normalmente, la gente cree que es difícil crear un sitio web o bien que se requiere un determinado tipo de software caro y sofisticado[3]. Sin embargo, lo que realmente necesitamos es lo siguiente: un “navegador” (programa que te permite navegar y abrir sitios web) y un sencillo editor de texto (Bloc de notas de Windows, Pico de Linux o TextEdit de Mac) para escribir código fuente[4].

Una página web puede resultar realmente útil a la hora de promocionar productos o publicar nuestro trabajo, en este caso, en el ámbito audiovisual. Además, para dar una mejor impresión, se recomienda contar con un buen diseño, el cual haga accesible el sitio web al usuario. Con este objetivo, se crearon los tags (etiquetas)[5].

Algunos de los tags más importantes son los siguientes:

  • <HTML>: indica que el fichero es una página web.
  • Tags de apertura (<HTML>) y tags de cierre (</HTML>): indican que entre ambos tags todo lo incluido estará escrito en código web.
  • <body>: indica el cuerpo del sitio web.
  • <head>: indica la cabecera de la web.
  • <title>: indica el título de la web, el cual aparecerá en la pestaña superior del navegador cuando buscas la página en Internet.
  • <h1>: indica el título principal, que muestra de qué vamos a hablar en el sitio.
  • <p>: indica la existencia de un nuevo párrafo; funcionan igual que los párrafos de Microsoft Word.
  • <br>: indica un salto de línea dentro de un mismo párrafo, es decir, que no se guarda un espacio de interlineado.

Cabe destacar que la estructura de la página web viene determinada por los tags utilizados, no por la posición que ocupan dichos tags en el fichero (es por ello que es indiferente escribir justo después de un tag que en la línea inferior, aparecerán tras “refrescar” la página web en la misma posición).

Si abrimos la consola especial, nos permite editar determinadas partes de la web sin recurrir directamente al blog de notas, luego puede resultar bastante útil. La visualización de los elementos de una página web se realiza mediante una serie de estilos (styles) o ficheros CSS, los cuales permiten modificar las características de lo escrito en el fichero, como por ejemplo, el tipo de letra, el posicionamiento de las palabras, si una tabla tiene bordes o no, e incluso el color mismo. Es curioso el hecho de que sea posible crear nuestros propios “estilos”[6].

A la hora de diseñar nuestra página web, es importante que comprendamos bien lo que escribimos (es decir, que esté perfectamente ordenado todo lo escrito), luego un editor de textos como Sublime Text facilitará el manejo gracias a sus diversos colores y posicionamiento de las palabras[7].

Ilustración: Sublime Text[8]

Dentro de una página web, da una mejor impresión incluir contenido audiovisual en lugar de tan solo texto. Por ello, con tan solo poner el nombre del fichero de una imagen concreta en el blog de notas o editor de texto y su respectivo tag (img), aparece, siendo posible su edición en cuanto a altura y anchura (así como la opción carrusel, que van variando unas y otras, entre otras). En referencia a los vídeos, se copia y pega el código HTML del vídeo (en este caso de Youtube) en el editor.

Cabe mencionar Bootstrap, una librería cuyo objetivo es maquetar la página web donde se presenta un vídeo. Se trata de un conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales[9].

La implementación de la accesibilidad en los contenidos audiovisuales es mucho más compleja que en otros contenidos: no radica simplemente en HTML sino en otras tecnologías (como SMIL o DFXP) y en la creación de otros contenidos específicos. Esto significa que requiere un cierto tipo de especialización que va mucho más allá de poner un contenido textual en un determinado lugar (como el texto alternativo en las imágenes)[10].

En conclusión, realizar una página web es muy sencillo, puesto que solo se necesita un navegador y un bloc de notas. El contenido audiovisual que podemos incluir es muy sencillo de implementar, ya que mediante el uso de tags y otras técnicas podemos ofrecer a nuestro público un contenido propio o proveniente de otras plataformas.

 

REFERENCIAS

[1] Mozilla Developer Network. Tecnología Web para desarrolladores: HTML. Disponible en: https://developer.mozilla.org/es/docs/Web/html

[2] Tutorials point. HTML Tutorial. Disponible en: https://www.tutorialspoint.com/html/

[3] HTML.net. Introducción- Tutorial HTML gratuito. Disponible en: http://es.html.net/tutorials/html/introduction.php

[4] HTML.net. Lesson 1. Disponible en: http://es.html.net/tutorials/html/lesson1.php

[5] Voces Merayo, R (2008). El contenido audiovisual: otro reto para la accesibilidad web. Bid: Textos Universitarios de Biblioteconomía y Documentación, nº21. Disponible en: http://bid.ub.edu/21/voces2.htm

[6] Diseño Web (2011). Cómo Preparar una Guía de Estilo para tu Página Web. WixBlog. Disponible en: https://es.wix.com/blog/2011/01/como-crear-una-guia-de-estilo/

[7] Sublime Text. Home. Disponible en: https://www.sublimetext.com/

[8] Imagen de Sublime Text. Disponible en: http://cache.filehippo.com/img/ex/2794__Sublime_text_2_1.png

[9] Wikipedia. Bootstrap. Disponible en: https://es.wikipedia.org/wiki/Bootstrap_(framework)

[10] Voces Merayo, R (2008). El contenido audiovisual: otro reto para la accesibilidad web. Bid: Textos Universitarios de Biblioteconomía y Documentación, nº21. Disponible en: http://bid.ub.edu/21/voces2.htm

BIBLIOGRAFÍA

Diseño Web (2011). Cómo Preparar una Guía de Estilo para tu Página Web. WixBlog. Disponible en: https://es.wix.com/blog/2011/01/como-crear-una-guia-de-estilo/

HTML.net. Introducción- Tutorial HTML gratuito. Disponible en: http://es.html.net/tutorials/html/introduction.php

HTML.net. Lesson 1. Disponible en: http://es.html.net/tutorials/html/lesson1.php

Mozilla Developer Network. Tecnología Web para desarrolladores: HTML. Disponible en: https://developer.mozilla.org/es/docs/Web/html

Imagen de Sublime Text. Disponible en: http://cache.filehippo.com/img/ex/2794__Sublime_text_2_1.png

Sublime Text. Home. Disponible en: https://www.sublimetext.com/

Tutorials point. HTML Tutorial. Disponible en: https://www.tutorialspoint.com/html/

Voces Merayo, R (2008). El contenido audiovisual: otro reto para la accesibilidad web. Bid: Textos Universitarios de Biblioteconomía y Documentación, nº21. Disponible en: http://bid.ub.edu/21/voces2.htm

Wikipedia. Bootstrap. Disponible en: https://es.wikipedia.org/wiki/Bootstrap_(framework)

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s