Si puedes, imagina un momento antes de la invención de internet. Los sitios web no existían, y los libros, impresos en papel y fuertemente enlazados, eran su principal fuente de información. Tomó una cantidad considerable de esfuerzo, y lectura, para rastrear la información exacta que buscaba.
Hoy puede abrir un navegador web, saltar a su motor de búsqueda preferido y realizar búsquedas. Cualquier bit de información imaginable descansa a su alcance. Y es probable que alguien en algún lugar haya creado un sitio web con su búsqueda exacta en mente.
HTML (el lenguaje de marcado de hipertexto) y CSS (hojas de estilo en cascada) son dos de las tecnologías principales para crear páginas web. HTML proporciona la estructura de la página, CSS el diseño (visual y auditivo) para una variedad de dispositivos. Junto con los gráficos y las secuencias de comandos, HTML y CSS son la base para crear páginas web y aplicaciones web.
El HTML y CSS vienen siendo los dos lenguajes más dominantes cuando hablamos de desarrollar un sitio web. En el transcurso de este artículo daremos a conocer las definiciones y conceptos básicos de estos dos idiomas.
¿Qué es HTML?
HTML es el lenguaje para describir la estructura de las páginas web. HTML da a los autores los medios para:
- Publicar documentos en línea con encabezados, texto, tablas, listas, fotos, etc.
- Recuperar 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.
- Incluir 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.
¿Qué es XHTML?
XHTML es una variante de HTML que utiliza la sintaxis de XML, el lenguaje de marcado extensible. XHTML tiene todos los mismos elementos (para párrafos, etc.) que la variante HTML, pero la sintaxis es ligeramente diferente. Debido a que XHTML es una aplicación XML, puede usar otras herramientas XML (como XSLT, un lenguaje para transformar contenido XML).
¿Qué es CSS?
CSS es el lenguaje para describir la presentación de las páginas web, incluidos los colores, el diseño y las fuentes. Permite adaptar la presentación a diferentes tipos de dispositivos, como pantallas grandes, pantallas pequeñas o impresoras. CSS es independiente de HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. La separación de HTML de CSS hace que sea más fácil mantener los sitios, compartir hojas de estilo en las páginas y adaptar las páginas a diferentes entornos. Esto se conoce como la separación de estructura (o: contenido) de la presentación.
Términos comunes de HTML
Al comenzar con HTML, es probable que encuentre términos nuevos, y con frecuencia extraños. Con el tiempo se familiarizará más y más con todos ellos, pero los tres términos HTML comunes con los que debe comenzar son elementos, etiquetas y atributos.
Elementos
Los elementos son designadores que definen la estructura y el contenido de los objetos dentro de una página. Algunos de los elementos que se usan con más frecuencia incluyen múltiples niveles de encabezados (identificados como elementos <h1> a <h6>) y párrafos (identificados como el elemento <p>); la lista continúa para incluir los elementos <a>, < div>, < span>, < strong> y < em>, y muchos más.
Etiquetas
El uso de paréntesis de menor y mayor que un ángulo que rodea un elemento crea lo que se conoce como una etiqueta. Las etiquetas suelen aparecer en pares de etiquetas de apertura y cierre.
Una etiqueta de apertura marca el comienzo de un elemento. Consiste en un signo menor que seguido del nombre de un elemento, y luego termina con un signo mayor que; por ejemplo, < div >.
El contenido que se encuentra entre las etiquetas de apertura y cierre es el contenido de ese elemento. Un enlace de anclaje, por ejemplo, tendrá una etiqueta de apertura de <a> y una etiqueta de cierre de </a>. Lo que cae entre estas dos etiquetas será el contenido del enlace de anclaje.
Atributos
Los atributos son propiedades que se utilizan para proporcionar información adicional sobre un elemento. Los atributos más comunes incluyen el atributo id, que identifica un elemento; el atributo de clase, que clasifica un elemento; el atributo src, que especifica una fuente para contenido integrable; y el atributo href, que proporciona una referencia de hipervínculo a un recurso vinculado.
Los atributos se definen dentro de la etiqueta de apertura, después del nombre de un elemento. Generalmente los atributos incluyen un nombre y un valor. El formato de estos atributos consiste en el nombre del atributo seguido de un signo igual y luego un valor de atributo entre comillas.
Términos comunes de CSS
Además de los términos HTML, hay algunos términos CSS comunes con los que querrá familiarizarse. Estos términos incluyen selectores, propiedades y valores. Al igual que con la terminología HTML, cuanto más trabaje con CSS, más serán estos términos una segunda naturaleza.
Selectores
A medida que se agregan elementos a una página web, se pueden diseñar utilizando CSS. Un selector designa exactamente a qué elemento o elementos dentro de nuestro HTML apuntar y aplicar estilos (como color, tamaño y posición). Los selectores pueden incluir una combinación de diferentes calificadores para seleccionar elementos únicos, todo dependiendo de qué tan específicos deseamos ser. Por ejemplo, podemos querer seleccionar cada párrafo en una página, o podemos seleccionar solo un párrafo específico en una página.
Los selectores generalmente apuntan a un valor de atributo, como un id o valor de clase, o apuntan al tipo de elemento, como <h1> o <p>.
Propiedades
Una vez que se selecciona un elemento, una propiedad determina los estilos que se aplicarán a ese elemento. Los nombres de las propiedades caen después de un selector, dentro de las llaves, {}, e inmediatamente antes de los dos puntos, ( : ) . Existen numerosas propiedades que podemos usar, como fondo, color, tamaño de fuente, altura y ancho, y con frecuencia se agregan nuevas propiedades. En el siguiente código, estamos definiendo las propiedades de color y tamaño de fuente que se aplicarán a todos los elementos <p>.
Valores
Hasta ahora hemos seleccionado un elemento con un selector y hemos determinado qué estilo nos gustaría aplicar con una propiedad. Ahora podemos determinar el comportamiento de esa propiedad con un valor. Los valores se pueden identificar como el texto entre los dos puntos, ( : ) y el punto y coma,;. Aquí estamos seleccionando todos los elementos <p> y estableciendo el valor de la propiedad de color en naranja y el valor de la propiedad de tamaño de fuente en 16 píxeles.