Sesión 5 - HTML

¿Qué es HTML?

HyperText Markup Language es un lenguaje de marcas sobre el cual están escritas la mayoría de páginas web. Además, describe la estructura de las páginas web y permite insertar, texto y media en ellas.

Resultado de imagen para html
Tomada de: https://www.udemy.com/html-online-course/

Evolución de HTML


La siguiente imagen muestra la evolución de HTML a lo largo de los años, un breve resumen de la misma sería:

  • 1991: HTML 1.0 debuta como un lenguaje basado en SGML, pero incluyendo el tag href.
  • 1994: HTML 2.0 aparece como el primer conjunto de estándares HTML oficial. 
  • 1997: HTML facilita el uso de tablas y permite el uso de map images.
  • 1997: HTML 3.2 nace de la creencia que el uso de atributos como el color, estilos de fuentes y demás  estaban alejando a HTML de sus raíces de organizar.
  • 1998: HTML 4.0 aparece como una recomendación, este incluía CSS para los estilos por separado.
  • 2000: Nace XHTML de la unión de fuerzas entre HTML y XML.
  • 2004: Se crea  Web Hypertext Application Technology (WHAT), para que en 2008 se escriba el primer borrador de lo que sería HTML5.
Fuente: http://dev.xguru.net/html5/src/html5timeline.png

Estándares

Para que las páginas web puedan seguir una serie de reglas que las beneficien o que permitan cumplir una serie de requisitos mínimos como hacerlas accesibles, portables e internacionales se deben seguir ciertos estándares que permiten mantener en una "línea segura" el desarrollo de estas páginas. A continuación se listan algunos de estos estándares:

  • Uso de HTML y CSS.
  • Uso de Javascript y otras APIs web.
  • Usar gráficos (imágenes PNG, SVG o Canvas API).
  • Uso de audio y video (HTML, SVG y SMIL).
  • Accesibilidad, es uno de los elementos más importantes en una página web, para más información sobre cómo hacer una página accesible ver la siguiente guía: https://www.w3.org/WAI/standards-guidelines/wcag/
  • Internacionalidad, HTML y XML fueron contruidos en Unicode por lo que problemas con el idioma son pocos.
  • Mobile web, se debe tener una buena experiencia de acceso a la web para todo tipo de dispositivos, incluyendo celulares.
  • Es necesario mantener la seguridad como prioritaria.
  • MathML permite la reoresentación de la escuela en el terreno.

Elementos HTML

Especificaciones

Con la evolución de HTML, la sintaxis puede variar un poco, por este motivo, las especificaciones que generalmente se agregan al inicio de los documentos HTML son importantes, <!DOCTYPE> no es un tag, tiene como objetivo hacer saber al navegador que versión de HTML es el documento.

  • HTML 2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">


  • HTML .3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

  • HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  • XHTML 1.0
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.1

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • HTML 5.0
<!DOCTYPE html>*

* Reamente HTML5 no requiere DTD (Document Type Definition).

 Para verificar que una página cumple con los estándares definidos por distintas organizaciones se puede usar la siguiente página: https://validator.w3.org/

Sintaxis (Página de ejemplo)


En HTML, cada página tiene la declaración de su tipo, como se mencionó con anterioridad además están seguidas de <html> ... </html>
Estos son llamados elementos, los HTML están compuestos de estos (<head>, <title>, <body>, etc.).


Cada elemento tiene un nombre, estos son conocidos como tags. Y para saber cuando termina cada tag se usa la sintaxis de <tag> ... </tag>, donde el primero es el inicio del tag y el último el final del mismo. A continuación se presenta de manera muy general la estructura de una página HTLM:



HTML5

Nuevo de HTML5


Al ser una tecnología relativamente nueva, HTML5 aún no se encuentra dispoible en todos los navegadores, sin embargo, cada vez más usarán esta tecnología.

Resultado de imagen para html5 browser not supported


Para más información sobre HTML, visite la página: https://www.w3schools.com/html/def
ault.asp


Referencias

Bartels, A. (2016, January 04). Internet History: HTML Code Evolution 1.0 to 5.0 [INFOGRAPHIC]. Retrieved from https://blog.rackspace.com/internet-history-html-evolution

HTML Introduction. (n.d.). Retrieved from https://www.w3schools.com/html/html_intro.asp

Luján, S. (n.d). HTML5 and CSS3 – The Future of the Web Programming. Universidad de Alicante. Retrieved from: https://rua.ua.es/dspace/bitstream/10045/20201/14/02-HTML.pdf

Solano, E. (2018). HTML CSS JavaScript.  Curso Introducción al desarrollo de aplicaciones WEB - IC8016.

Standards WEB DESIGN AND APPLICATIONS. (n.d.). Retrieved from https://www.w3.org/standards/webdesign/




Comentarios

Publicar un comentario

Entradas más populares de este blog

Sesión 6 - Javascript

Imagen
¿Qué es Javascript? Javascript es considerado el lenguaje de programación de HTML y por ende, de la web. Es un lenguaje dinámico, levemente tipado y multiparadigma. ¿Por qué usar Javascript? Permite controlar el comportamiento de las páginas web. Permite la creación de páginas web dinámicas. Puede usarse en aplicaciones móviles, desktop applications y web applications. Facilidad  de uso. Amplia comunidad de desarrolladores que lo usan. Permite el uso de Single-page applications (el navegador se encarga de representar la página). ¿Cómo usar Javascript? Una de las formas más sencillas y conocidas para usar Javascript en nuestra página web es usando el evento onclick , en HTML la sintaxis sería algo así:  <element onclick="myScript"> Este evento se usa en la mayoría de casos para darle funcionalidad a botones, aunque también puede funcionar con otros tipos de elementos. Ejemplo: -----------------------------------------------
Leer más

Sesión 3 - Ejemplo de uso de servlets y JSP

Imagen
Enunciado A continuación se presenta un enunciado con el trabajo a desarrollar en este ejemplo, el siguiente PDF, describe que se debe hacer con el fin de que el ejemplo pueda ser considerado válido. 1. Creación de un nuevo proyecto Para este ejemplo, usaremos Netbeans IDE 8.2, por lo que para crear la aplicación Java Web, la guía será sobre este IDE. En caso de usar otro, puede brincar hasta el paso 2. Al hacer click en Nuevo Proyecto... se abrirá una ventaja como la siguiente, en este caso crearemos una aplicación Java Web > Web Application. Seguidamente, asignamos un nombre y ubicación a nuestro proyecto. Finalmente, podemos escoger el servidor web a usar. En caso de no tener servidor, será necesario descargar uno y seguidamente agregarlo con el botón Add mostrado en la siguiente captura. En este caso usaremos GlassFish Server 5, pero es posible usar cualquier otro servidor. Después de este paso podemos dar a Finish. 2. Creaci
Leer más

Laboratorio 1 : Desarrollo práctico de una página WEB acerca de su vida personal

Imagen
Para este laboratorio se tomará en cuenta únicamente la parte visual de la página web, es decir no se realizará funcional. Para entender mejor lo solicitado se presenta el enunciado del Laboratorio 1: Para acceder al código HTML y CSS de la  página web creada como resultado del laboratorio use el siguiente link:  https://drive.google.com/drive/folders/1byjlM9hELTEGUPWGojJ3YUDIHoQddy8v?usp=sharing NOTA: En el los archivos subidos, el link al CSS contiene un path local, basta con cambiar el path a  "css/custom.min.css" Elementos usados HTML <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">:  se encarga de que la página realizada tenga la característica responsive, esto diciéndole al navegador como debe ajustarse.  <li><a class="active" href="home.html">Home</a></li>: usado para representar un item en una lista, en este caso, se usó como elemento del m
Leer más