¿De que hablamos hoy?. Lenguaje HTML, conceptos generales.

 

Orígenes del Navegador y del lenguaje HTML.

   El primer navegador fue desarrollado por Tim Berners-Lee, en la CERN, en 1990; el navegador web llamado WorldWideWeb era bastante sofisticado y gráfico, pero solo funcionaba en estaciones NeXT.

    El origen del lenguaje se remonta a 1991, cuando Tim Berners-Lee lo publicó por primera vez en internet en un documento al que llamó Etiquetas HTML. En ese documento se describen 22 etiquetas que mostraban un diseño inicial y sencillo de este lenguaje. Aún se conservan algunos de estos elementos y muchos otros se han ido incorporando con el paso de los años.

   Son varias las versiones que han existido de HTML desde que se introdujo en Internet. En cada una de ellas se van ampliando y desarrollando nuevas funcionalidades.

Definiciones.

   HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

   Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

   Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser vistos.

   La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.

   Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

   Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

    El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés, browser, aunque su uso es minoritario.

      Los navegadores web se han convertido en las herramientas más populares de acceso a Internet. Por esa razón explotar sus vulnerabilidades se han convertido en un objetivo muy interesante para atacar los sistemas informáticos en los que se instalan. Es tal el interés, que se han desarrollado herramientas automáticas para explotar vulnerabilidades en los navegadores.

Funcionamiento de los navegadores.

La comunicación entre el servidor web y el navegador se realiza mediante el protocolo de comunicaciones Hypertext Transfer Protocol (HTTP), aunque la mayoría de los navegadores soportan otros protocolos como File Transfer Protocol (FTP), Gopher y Hypertext Transfer Protocol Secure (HTTPS, una versión cifrada de HTTP basada en Secure Socket Layer —SSL— o Capa de Conexión Segura).

La función principal del navegador es descargar documentos HTML y mostrarlos en pantalla. En la actualidad, no solamente descargan este tipo de documentos sino que muestran con el documento sus imágenes, sonidos e incluso vídeos en transmisión en diferentes formatos y protocolos. Además, permiten almacenar la información en el disco o crear marcadores (bookmarks) de las páginas más visitadas.

Los primeros navegadores web solo soportaban una versión muy simple de HTML. El rápido desarrollo de los navegadores web propietarios condujo al desarrollo de dialectos no estándares de HTML y a problemas de interoperabilidad en la web.

Los más modernos (como Chrome, Amaya, Firefox, Netscape, Opera, Edge e Internet Explorer 9.0) soportan los estándares HTML y XHTML (comenzando con HTML 4.01, los cuales deberían visualizarse de la misma manera en todos ellos).

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en la web. Su objetivo es crear una web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet.

¿Qué es una etiqueta?.

   Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares (símbolo < >), cuyo uso es el de escribir código HTML.

   Se diferencian dos tipos de etiquetas:

1. Etiquetas de apertura <etiqueta>.
2. Etiquetas de cierre </etiqueta>.

Elementos del lenguaje HTML

Se distinguen varios componentes: elementos y atributos.

• Elementos: Desarrollan la estructura de las páginas webs. Por ejemplo los elementos h1, h2, h3, h4, h5 y h6 se utilizan para crear encabezados. Por orden jerárquico h1 representa el primer nivel y, normalmente, el texto más grande, h2 es el segundo nivel con un texto algo más pequeño, así hasta llegar al h6 que es el texto más pequeño de todos.

• Atributos: Los atributos de las etiquetas HTML definen detalles de comportamiento o presentación de la etiqueta donde van colocados. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas, por ejemplo en la siguiente línea <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>, indica al navegador del tipo que sea móvil o de escritorio, que debe mostrar el contenido, adaptado a la pantalla del dispositivo y a pantalla completa.

Etiquetas básicas (elementos, atributos y valores) y su estructura.

<!DOCTYPE html>

<html>

<head> 

<title> … </title> 

<meta charset=UTF-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link href="style.css" rel="stylesheet" type="text/css" /> 

</head> 

<body bgcolor=#5d0000 text=#f9e783> 

<script src="script.js"> … </script> 

<font color=#4ff3ff size=16> ... </font> 

<!--...--> 

<b> … </b> 

<s> … </s> 

<u> … </u> 

<i> … </i> 

<a href="URL o #ancla"> … </a> 

<strong> … </strong> 

<br> … </br> 

<h1> </h1> …. <h6> </h6> 

<img src ="img.jpg" title="Nom" align="center" width="120" height="100" border="4" > 

<embed type="video/webm" src="video.mp4" width="400" height="300"> 

<ol type="1"> 

<li> … </li> 

</ol> 

<ul type="circle"> 

<li> … </li> 

</ul> 

<p id="ancla" bgcolor="#0101DF"> … </p> 

<table border="1" width="75%" bgcolor="#0101DF"> 

<caption> … </caption> 

<tr style="color:#2EFEF7" bgcolor="#2E9AFE"> 

<td rowspan="2" colspan="2" align="center"> … </td> 

</tr> 

</table> 

<span> … </span> 

<iframe src="URL" ></iframe> 

<div> … </div> 

</body> 

</html>

Representación del color.

   El color lo representamos en HTML mediante la combinación de dos elementos de los 16 disponibles en el código hexadecimal (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) y para cada uno de los colores fundamentales; 2 para el rojo (rr), 2 para el verde (gg) y 2 para el azul (bb) y escrito con el siguiente formato: #rrggbb, por ejemplo #2EFEF7.

   Existen páginas que te facilitan el código de color hexadecimal, mediante la elección visual en una paleta de colores.

¿Qué es un editor web?.

   Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.

   WYSIWYG, acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes"), es una frase aplicada a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento mostrando directamente el resultado final, frecuentemente el resultado impreso.

   En el caso de editores de HTML, este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento.

¿Qué es un IDE?.

   Un entorno de desarrollo integrado o entorno de desarrollo interactivo, en inglés Integrated Development Environment (IDE), es una aplicación informática que proporciona servicios integrales para facilitarle al desarrollador o programador el desarrollo de software. Normalmente, un IDE consiste de un editor de código fuente, herramientas de construcción automáticas y un depurador.

La mayoría de los IDE tienen auto-completado inteligente de código (IntelliSense). Algunos IDE contienen un compilador, un intérprete, o ambos, tales como NetBeans y Eclipse; otros no, tales como SharpDevelop y Lazarus.

   El límite entre un IDE y otras partes del entorno de desarrollo de software más amplio no está bien definido. Muchas veces, a los efectos de simplificar la construcción de la interfaz gráfica de usuario (GUI, por sus siglas en inglés) se integran un sistema controlador de versión y varias herramientas.

   Muchos IDE modernos también cuentan con un navegador de clases, un buscador de objetos y un diagrama de jerarquía de clases, para su uso con el desarrollo de software orientado a objetos.

Herramientas digitales propuestas.

   Existen en el mercado multitud de editores web, desde los mas simples (opción prácticamente utilizada por pioneros, profesores, nostálgicos o las tres cosas a la vez), como pueden ser los editores de texto planos p. e.: el editor de texto de Windows, cuya ventaja fundamental es que la de tener el control absoluto sobre lo que escribes, sin ayudas, a otros muchos mas complejos y de funcionalidad mencionadas en el artículo, que proporciona asistencia de código y ftp, control visual y consola para depuración, como puede ser Dreamweaver de Adobe.

   Para el caso que nos ocupa y teniendo en cuenta que queremos mostrar los principios básicos de un lenguaje y dirigido a principiantes, optaremos por las siguientes herramientas: el editor de texto de Windows, herramienta digital básica y el IDE Repl.it, en su versión gratuita, para entender lo que es trabajar en un entorno de desarrollo integrado, a la vez que podemos mostrar nuestro trabajo, alojado en servidores web con carácter publico y por lo tanto accesible.

Propuesta didáctica para el alumnado.

   La propuesta para hoy es la realización de un ejercicio libre (cuyo texto gire entorno a la figura de Tim Berners-Lee, lo que ha supuesto la implementación del lenguaje HTML en la difusión de la WWW y el alcance actual en nuestra sociedad, así como la descripción y uso de las etiquetas básicas mencionadas en este artículo, mediante tablas.

   Para ello se realizará un ejercicio con las herramientas descritas en el apartado anterior, proporcionando el código en un documento HTML, imágenes y enlace al trabajo alojado en el servidor web que nos proporciona Repl.it, subiéndolas a la plataforma habitual, Google Classroom o Moodle, en respuesta a la tarea lanzada.

   La página web deberá contener obligatoriamente en su código fuente:

La mayoría de las etiquetas básicas mencionadas, elementos y atributos, salvo la que tienen que ver con los Script y hojas de estilo CSS, que tiene carácter voluntario (en este caso se deberán entregar los archivos, como parte de la documentación).

Fuente de texto de diferente tipo y tamaño, según requiera por el texto inscrito. 

Listas ordenadas y no ordenadas. 

Inserción de imágenes o vídeos. 

Hipervínculos o enlaces para navegación, tanto en el propio documento como a páginas externas en nueva ventana. 

Tabla con la relación de etiquetas, elementos y atributos, junto con una breve descripción.

 

    El tiempo necesario para la realización del trabajo será de una semana.

Temporalización.

   Entre dos o tres semanas de formación y una semana para la realización del trabajo.

Rúbrica y evaluación.

   Documento para el alumnado, de forma que aporte claridad y que este conozca los principales puntos donde se incidirá a la hora de evaluar el trabajo realizado, ya sea por coevaluación o por evaluación por docente. Se puede utilizar con el complemento CoRubrics, para facilitar la evaluación y la comunicación de resultados.

Enlace a rúbrica , en nueva ventana.

Catalogación

    Curso recomendado: ESO, Bachillerato.

    Asignatura: TIC.

    Competencias clave trabajadas: 

• Competencia en Comunicación Lingüística.
• Competencia Matemática y Competencias básicas en Ciencia y Tecnología.
• Aprender a Aprender.
• Sentido de la iniciativa y Espíritu emprendedor.
• Competencia Digital.

Agradecimientos

    Gracias por tu interés en esta recopilación de material educativo. Si lo usas y compartes, no olvides mencionarme por Instagram (@jmcaneda), Twitter (@CanedaPernas) o en mi blog, me hará muchísima ilusión.

   También puedes comentar cual ha sido tu experiencia respecto de su contenido o utilización.

   Recuerda que el contenido pertenece a sus autores y que mi aportación se limita a una reedición de contenidos, estructura, composición y algo de contenido, para presentarlo de forma que sea, en mi opinión, mas entendible y de aplicación con algunas herramientas digitales que considero apropiadas y de utilidad para la mejora en las competencias digitales.

Términos de uso

    Puedes usar este material para uso personal o como inspiración para crear el tuyo personal.

    NO ESTÁ PERMITIDO: vender, comercializar o redistribuir este material.

Atribución, Créditos, Referencias, Notas bibliográficas, Herramientas digitales

Diccionario económico y financiero | Economipedia - Desde https://economipedia.com/definiciones/lenguaje-html.html

Wikipedia - Desde https://es.wikipedia.org/wiki/HTML

Wikipedia - Desde https://es.wikipedia.org/wiki/Navegador_web

Wikipedia - Desde https://es.wikipedia.org/wiki/Editor_de_p%C3%A1ginas_web

Wikipedia - Desde https://es.wikipedia.org/wiki/WYSIWYG

Wikipedia - Desde https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado

W3schools.com - Conocimiento sobre HTML Desde https://www.w3schools.com/

OneNote - Preparación, esquema y contenidos.

Repl.it Entorno de Desarrollo Integrado (IDE) OnLine, Multilenguaje y Colaborativo -repl.it

Rúbrica para evaluar una página web” de CeDeC - Desde Banco de rúbricas y otros documentos | Cedec (intef.es) - Desde https://cedec.intef.es/banco-de-rubricas-y-otros-documentos/

Códigos de colores HTML (html-color-codes.info) - Desde https://html-color-codes.info/codigos-de-colores-hexadecimales/