Introducción a HTML y CSS

Desarrollo de Aplicaciones Web

Introducción

¿Qué es HTML?

  • HTML es el lenguaje que se utiliza para crear páginas web a las que se accede mediante internet


  • HTML son las siglas de "HyperText Markup Language"


  • Los navegadores muestran las páginas web después de leer e interpretar su contenido HTML

  • ¿Qué es HTML?

  • Estándar cuyas normas define un organismo, World Wide Web Consortium (W3C)


  • W3C define HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global"

  • Breve historia de HTML

  • El hipertexto permite que los usuarios accedan a información relacionada con los documentos que visualizan


  • 1945, origen de la idea de hipertexto se debe a Vannevar Bush y su máquina Memex (Memory Index)

  • Breve historia de HTML

  • Memex contenía unos mecanismos que permitían búsqueda de archivos microfilmados que podían ser observados y modificados


  • 1980, el físico Tim Berners-Lee (CERN) propuso un nuevo sistema de hipertexto

  • Breve historia de HTML

  • Con Robert Cailliau, presentó la propuesta que resultó ganadora: WorldWideWeb


  • 1993, se propuso la estandarización por parte de IETF (Internet Engineering Task Force)

  • Breve historia de HTML

  • Ninguna de las dos propuestas, HTML y HTML+ consiguieron convertirse en estándar oficial


  • 1995, IETF organizó un grupo de trabajo de HTML y el 4 de septiembre publicaron el estándar HTML 4.0

  • Breve historia de HTML

  • 1996, desde entonces los estándares de HTML los publica otro organismo, el W3C


  • 1999, se publicó el estándar HTML 4.0. Incorporó hojas de estilo y scripts

  • Breve historia de HTML

  • 2000, a partir de este año W3C se centró en el desarrollo del estándar XHTML


  • 2004, Apple, Mozilla y Opera decidieron organizarse en una asociación llamada WHATWG


  • 2007, W3C decidió retomar la actividad estandarizadora de HTML

  • Breve historia de HTML

  • 2008, se publica el primer borrador de HTML 5


  • 2014, el inventor de la Web Sir Tim Berners-Lee, presentó la versión final

  • Breve historia de HTML

    El director ejecutivo del Consorcio W3C, el Dr. Jeff Jaffe (MIT) publicó un texto acerca de las prioridades, con el título "Fundamentos de Aplicación"


  • Seguridad y privacidad, todo lo relacionado con autenticaciones, encriptación, protección de identidad y actividad en línea


  • Diseño y desarrollo de la web, en cuanto a estilo, formato, gráficos, animación y tipografía

  • Breve historia de HTML

  • Interacción con distintos equipos como sistemas de sensores y Bluetooth


  • Ciclo de uso de aplicación para administración de tareas fuera de conexión y sincronización


  • Medios y comunicaciones en tiempo real, para efectos, por ejemplo, de transmisiones en vivo (streaming)

  • Breve historia de HTML

  • Desempeño y afinación de la capacidad y precisión en la respuesta y descarga de sitios web con sus funciones


  • Usabilidad y accesibilidad, para un web internacional, multilingüe y de acceso para personas con distintas discapacidades


  • Servicios como pagos y web social

  • Breve historia de HTML

  • 2000, XHTML 1.0 versión avanzada de HTML basada en XML


  • XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML

  • HTML y CSS

  • Inicialmente HTML solo incluía información sobre contenidos de texto e imágenes


  • JavaScript provocó que las páginas incluyeran código de aplicaciones que se utilizan para crear páginas dinámicas


  • Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento

  • HTML y CSS

  • CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar


  • Ventaja de flexibilidad en distintas plataformas

  • HTML y CSS

    HTML y CSS

    Características básicas

    Lenguajes de etiquetas

  • La solución que se emplea para guardar la información con formato es sencilla: el archivo electrónico almacena tanto los contenidos como la información sobre el formato


  • Ejemplo, si se quiere dividir el texto en párrafos y se desea dar especial importancia a algunas palabras, se podría codificar como:

  • Lenguajes de etiquetas

    <párrafo> Contenido de texto con <importante> algunas palabras </importante> resaltadas de forma especial.</párrafo>

    Lenguajes de etiquetas

  • Las etiquetas se indican por pares


  • Ventaja: son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrónicos


  • Desventaja: pueden aumentar mucho el tamaño del documento, por lo que se utilizan etiquetas con nombres muy cortos

  • Lenguajes de etiquetas

    La estructura general es:

      <nombre_etiqueta> ... </nombre_etiqueta>>

    Características básicas

    El primer documento HTML

  • Las páginas HTML se dividen en dos partes: cabecera y cuerpo

  • La cabecera incluye información sobre la página, por ejemplo título e idioma, que no se visualiza

  • Desventaja: pueden aumentar mucho el tamaño del documento, por lo que se utilizan etiquetas con nombres muy cortos

  • El cuerpo de incluye todos sus contenidos, como párrafos de texto e imágenes

  • Características básicas

    HTML y CSS

    Lenguajes de etiquetas

    Código HTML de una página web muy sencilla:
      <html>
      <head>
      <title>Mi primer documento HTML</title>
      </head>
      
      <body>
      <p>El lenguaje HTML es <b>tan sencillo</b> que
      prácticamente se entiende sin estudiar el significado
      de sus etiquetas principales.</p>
      </body>
      
      </html>
      

    Cómo lograr un sitio web atractivo

    Analizar el sitio objetivamente y valorar qué factores están incidiendo en la percepción de los visitantes::

    • Saturación visual de textos e imágenes
    • Navegación confusa
    • Incompatibilidad con navegadores y dispositivos móviles
    • Publicidad excesiva
    • Lentitud al cargar los contenidos
    • Usar plantillas populares
    • Contenido poco original