Sesión 5

Agenda

• HTML

   - Definición
   - Evolución del lenguaje
   - Estándares según W3c.org
   - Radiografía de cualquier elemento HTML
   - Distintas especificaciones
   - Validación de especificaciones
   - Sintaxis de elementos HTML
   - Lo nuevo en HTML5

•  CSS

    - ¿Qué es CSS?
    - Sintaxis de un elemento CSS
    - ¿Cómo enlazar HTML con CSS?

HTML(HTML-HyperText Markup Languaje)

Es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.

El HTML se escribe en forma de <<etiquetas>>, rodeadas por corchetes angulares (<,>).

HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script(por ejemplo javaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. Además da a los autores los medios para:

• Publique documentos en línea con encabezados, texto, tablas, listas, fotos, etc.
• Recupere información en línea a través de enlaces de hipertexto, con el clic de un botón.
• Diseñar formularios para realizar transacciones con servicios remotos, para usar en la búsqueda de información, hacer reservaciones, ordenar productos, etc.
• Incluya hojas de cálculo, videoclips, clips de sonido y otras aplicaciones directamente en sus documentos.
• Con HTML, los autores describen la estructura de las páginas utilizando el marcado. Los elementos del lenguaje etiquetan partes del contenido, como "párrafo", "lista", "tabla", etc.

Evolución de HTML

Se ilustra la evolución de HTML desde 1990 al 2009:

HTML es un estándar definido por el Consorcio World Wide Web (W3C) enlace

Estándares provistos por W3C en el diseño WEB y aplicaciones

• HTML & CSS
• Audio y Video
• Web Móvil
• JavaScript Web APIs
• Accesibilidad
• Privacidad
• Gráficos
• Internacionalización
• Matemáticas en la Web

Definiendo los conceptos de W3C:

Se puede consultar en :  w3.org

Radiografía de un elemento HTML

Distintas especificaciones

Con la evolución del HTML se van generando distintas especificaciones de la sintaxis del lenguaje de marcas.

Esto es HTML4

Esto es XHTML

Diferencia entre HTML/XHTML

• Lenguaje de marcado de hipertexto extendible
• XHTML esta basado en XML. 

                 - Sintaxis más estricta y limpia que HTML

• XHTML es casi idéntico que HTML 4.01
• Un documento XHTML tiene solo un elemento raíz

Validación de especificaciones

La validación de una página web es el proceso para asegurar que las páginas del sitio web se ajustan a los estándares definidos por varias organizaciones, principalmente el W3C.

El W3C ofrece de forma gratuita el servicio de validación de Marcado.

La validación es muy importante, porque asegura que las páginas web son interpretadas de la misma forma por software diferente.

Consultar en : Validador de W3C

Sintaxis de elementos HTML

Lo nuevo en HTML5

HTML5 es la nueva versión de HTML, la cual tiene más etiquetas y por lo tanto más opciones de diseño.

Cabe agregar que no todo nuestros contenidos de las páginas en HTML5 sirven en todos los navegadores por ejemplo en Intenet Explorer.

En HTML5 hay algunos nuevos elementos semánticos:

<header>

<hgroup>

<nav>

<article>

<section>

<asine>

<time>

<mark>

<footer>

Hay cuatro nuevos elementos multimedia>

<audio>

<canvas>

<source>

<video>

Y hay dos nuevos elementos para estructurar el contenido>

<details>

<summary>

Ejemplo del uso de <details>

Representación del HTML anterior:

CSS (Cascading Style Sheet)

Es un lenguaje de estilo de hojas usado para describir la representación de las páginas web. CSS permite la separación del contenido del documento de la presentación del documento (disposición, colores, fuentes, etc).

Sintaxis de un elemento CSS

CSS 2.1 tiene más de 90 propiedades. La última especificación es CSS 3.

¿Cómo enlazar HTML con CSS?

Enlazándose a una hoja de estilo externa. Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:

La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio --text/css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan.

Cabe agregar que es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.

Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de:

P { margin: 2em }

podría usarse como una hoja de estilo externa.

El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. 

La ausencia del atributo TITLE, como en la primera etiqueta <LINK>

En este ejemplo, tres hojas de estilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar múltiples hojas de estilo en un estilo único, se debe usar el mismo TITLE con cada hoja de estilo.

Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Además, la mayoría de navegadores guardan en caché las hojas de estilo externas, evitando así una demora en la presentación una vez que la hoja de estilo se ha guardado en caché.

Elementos HTML presentes:

<head> :  provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.

<div> : sirve para crear secciones o agrupar contenidos

<nav> : sirve para crear un menú de navegación. Contiene enlaces a las diferentes secciones de la Web.

<p> : elemento apropiado para distribuir texto en párrafos.

<link> :  especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.

<ul> : listas no ordenadas. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

<!--comment--> : elemento para realizar comentarios dentro del HTML para explicar de mejor   manera sus secciones.

<script> : Los scripts ofrecen la posibilidad de extender los documentos HTML de manera activa e interactivas.

<a> :genera vínculos de hipertexto para enlazar con ellos todos sus documentos en web. Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento.

<img> :  El elemento img representa a una imagen, lo cual es un recurso externo que puede ser incrustado en el cuerpo de un documento. La ubicación de dicho recurso externo debe especificarse en el atributo src.

Elementos CSS presentes:

@media: se usa en consultas de medios para aplicar diferentes estilos para diferentes tipos de dispositivos.

body : representa una sección en la que podemos hacer cambios de estilo a todo el cuerpo del documento HTML.

p : representa la sección de párrafos del documento en la que podemos hacer los respectivos cambios de estilo.

font size : nos permite cambiar el tamaño de la fuente dentro del body.

padding :  se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. La propiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea.

Bootstrap:

Elementos que se deben incluir en la sección <head>

Manejo de los div con los tipos class=container y container-fluid.

Contenedores

Bootstrap requiere un elemento contenedor para envolver los contenidos del sitio y alojar nuestro sistema de rejilla(grid). Se debe tener en cuenta que debido al padding y otros elementos, ninguno de los contenedores es anidable.

Container : para un contenedor de ancho fijo responsive

Container-fluid : para un contenedor de ancho completo, que abarque todo el ancho del viewport.

Referencias

Enlace 1: presentación de la sesión

Enlace 2: Documentación Bootstrap

Enlace 3: Documentación CSS

Enlace 4: Documentación HTML

PDF sobre HTML - Universidad de Alicante España