Skip to main content Link Menu Expand (external link) Document Search Copy Copied

HTML, CSS y el Árbol DOM

Contenidos
  1. Etiquetas WEB y su significado.
  2. CSS
    1. CSS layout
  3. Accesibilidad.
  4. BOM y DOM.
  5. Windows Object.
  6. Location, History, SetTimeOut y SetInterval.
  7. Recorrer el árbol DOM.
  8. Acceder a nodos, Nodos hijos, atributos, modificar, crear y nodos.

Etiquetas WEB y su significado.

HTML es un lenguaje de propósito específico, a diferencia de Javascript que es un lenguaje de propósito general, HTML es un lenguaje que nos ayuda a resolver un solo tipo de problema: Estructurar un documento de la Web. Es el pilar más básico de la Web. Define el significado y la estructura del documento. En general funciona acompañado de CSS, que se encarga de presentación o apariencia y ciertamente por Javascript para su comportamiento.

HTML significa Lenguaje de marcado de Hipertexto. Esta última palabra hace referencia a que los documentos HTML tienen links (enlaces o hipervínculos) que permiten al usuario saltar de un documento a otro, o en otras palabras: Navegar.

Los links son algo muy relevante de la Web, es lo que nos permite vincular documentos con otros y relacionar el contenido. Esto genera un gigantesco árbol de conocimiento relacionado mediante hipervínculos.

La palabra “Marcado” hace referencia a que la estructura del documento se establece mediante ciertas marcas, en rigor, se les llama “Etiquetas”.

HTML tiene un set de etiquetas predefinidas que nos permiten estructurar y jerarquizar el documento. Algunas etiquetas no se limitan solo a la estructura, sino que también tienen comportamiento como los mismos links y formularios.

Las etiquetas tienen un nombre y van rodeadas de “<” y “>”. Algunas etiquetas tienen contenido, como <p>Hola</p>. Cuando la etiqueta lleva contenido, debemos especificar la etiqueta de cierre, que es igual a la de apertura, pero con un slash “</>”.

Otras etiquetas no tienen contenido y no requieren etiqueta de cierre. Dentro de estas etiquetas encontramos por ejemplo la etiqueta <img> que no lleva contenido, sino que tendrá utilidad mediante atributos. Sin embargo, todas las etiquetas pueden llevar atributos que servirán para agregar características adicionales a su contenido, como las clases de CSS, ID’s entre varios otros.

Si bien HTML tiene un set predefinido de etiquetas y no podemos, a menos que sea con un framework JS, crear nuevas etiquetas, sí podemos crear atributos utilizando el prefijo meta cuando lo necesitemos. Por ejemplo, en Boolean utilizamos nuestros propios atributos cuando queremos hacer alguna prueba automatizada del tipo <h1 meta-test="main-title"></h1>.

CSS

Las Hojas de Estilo en Cascada (Cascading Style Sheets) es también un lenguaje de propósito específico usado para describir la presentación de un documento, ya sea en HTML o XML. CSS describe como se va desplegar los elementos en la pantalla, en la impresión o incluso cuando son reproducidas en audio.

Tarea: Averigua que es XML, para qué sirve y sus similitudes y diferencias con HTML.

CSS es un lenguaje maravilloso, con muchísima flexibilidad y que permite a los expertos hacer maravillas con él, pero es un lenguaje grande y complejo. Por lo que trabajar solamente con él es un ardua tarea y debemos invertir mucho tiempo para lograr resultados aceptable. Demos considerar que existen diferencias de implementación en diferentes navegadores y que cada día hay mayor variedad de dispositivos y tamaños de pantalla, por lo que en un contexto de trabajo de alta productividad como los equipos ágiles, siempre es recomendable trabajar con algún framework que nos garantice una implementación responsiva y que funcione en la gran mayoría de los navegadores.

Aun cuando los marcos de trabajo o frameworks nos dan un gran salto en productividad, siempre es bueno conocer los aspectos básicos y fundamentales de los lenguajes para aprovechar al máximo las bondades de los marcos de trabajo.

Si bien los aspectos más básicos de CSS no los veremos aquí (como dar propiedades, colores o ubicación de elementos) ya que puedes fácilmente encontrar esto en muchísimas páginas, sí haremos un alto en algunos aspectos.

CSS layout

El layout es como correctamente distribuir los elementos en relación al viewport y en relación a ellos mismos. Para esto hay que considerar diferentes valores para propiedades como display y position y herramientas más modernas como Flexbox y CSS Grid. Un manejo acabado de CSS está fuera del alcance de este curso y en la práctica ágil es mejor utilizar un framework CSS como Bootstrap y seguir diseños simples.

Accesibilidad.

BOM y DOM.

Windows Object.

Location, History, SetTimeOut y SetInterval.

Recorrer el árbol DOM.

Acceder a nodos, Nodos hijos, atributos, modificar, crear y nodos.