¿Que es HTML y CSS?

Tecnología HTML

¿Qué es HTML?

En la actualidad la mayoría de nosotros visitamos millones de páginas web por varias necesidades, pero suelen surgir varias preguntas como estas ¿Qué es HTML? ¿Para qué me sirve HTML? ¿Cómo funciona y dónde puedo escribir HTML? Y muchas preguntas más.

Si tu intentas buscar por medio de internet alguna definición de HTML, probablemente encontrarás esta o alguna muy parecida:

“HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de web. Se trata de las siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto”.

Ahora entraremos un poco más a fondo al dar una explicación sobre lo que es y para que nos sirve esta tecnología explicando que es: 

Es un formato abierto que surgió a través de las etiquetas SGML (Estándar de Lenguaje de Mercado Generalizado). Es un lenguaje que permite ordenar y etiquetar(tags) varios documentos, establecer una estructura y contenido en un sitio web, ya sea de texto, objetos e imágenes.

La forma en que funciona HTML es tan sencilla que puede ser creado o modificado en cualquier editor de texto por citar algunos el bloc de notas, procesadores de texto, software de diseño Web, así como los más utilizados programas de administración de contenido como puede ser Word Press, Magento, Sliverstripe etc.

Cabe destacar que HTML nos permite ciertos códigos conocidos como scripts, estos brindan instrucciones específicas a los navegadores, los cuales son los encargados de procesar el lenguaje. Entre los scripts más conocidos y utilizados son JavaScript y PHP.

Ahora que tenemos entendido el concepto de etiquetas necesitamos identificarlas. Estas se caracterizan por estar dentro de un menor que < y mayor que > por dar un ejemplo:

<AQUÍ SE INGRESARÁ EL NOMBRE DE LA ETIQUETA>

Esta etiqueta también deberá tener un inicio y un fin. El inicio de la etiqueta es normal, lleva los dos caracteres antes mostrados y dentro de estos el nombre, pero existe una diferencia para el final de la etiqueta la cual antes de escribir el nombre de la etiqueta debemos escribir / por mostrar un ejemplo:

Ahora que ya tenemos una idea nos falta ver la estructura de HTML. El código siempre debe iniciar con la etiqueta HTML. Por dar un ejemplo:

Ahora mostraremos el resultado del código anterior:

Tecnología CSS

¿Qué son las hojas de estilo o CSS?

Si te llama la atención o tienes curiosidad por el diseño web, seguramente tendrás algunas dudas sobre lo que es el término CSS. Esta tecnología es utilizada para darle cualidades visuales y estéticas a una página web. Si no tienes conocimientos sobre este tema observaras que es de forma analítica, lógica y un poco matemática de crear páginas web, pero gracias a ella podemos realizar de una forma sencilla nuestras páginas y conseguir dar una forma y diseño a nuestro gusto.

Probablemente te preguntaras sobre qué relación tienen estas hojas de estilo o CSS con el lenguaje HTML. Esta relación es demasiada fuerte ya que una ayuda a la otra, dado que HTML es un lenguaje de marcado (es decir, constituye la base de un sitio) y CSS enfatiza el estilo (toda la parte estética de un sitio web), por esta razón podemos decir que van de la mano.

Los CSS no son técnicamente una necesidad, pero al realizar tu sitio web no querrás que solo tenga puro código HTML, ya que se vería completamente desnudo. Tal como se muestra en la siguiente imagen:

Por consiguiente, veremos una explicación mas a detalle sobre las hojas de estilo o CSS y su funcionamiento al realizar nuestro sitio web.

¿Para qué sirve?

 El lenguaje CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para separar los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del documento a través de las hojas de estilo, incluyendo elementos como colores, fondos, márgenes, bordes, tipos de letra etc. Modificando la apariencia de una página web de una forma sencilla, permitiendo al desarrollador controlar el estilo y formato de los documentos.

¿Cómo funciona?

El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consta de un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.

Aquí mostramos un ejemplo de como es que se realiza:

Selector

Como vemos en la imagen de arriba el selector especifica los elementos HTML que van a ser afectados por esa declaración.

Declaración

Al ver la imagen podremos ver que la declaración va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Propiedad o atributo

También podemos observar que la propiedad define la interpretación del elemento asignándole un cierto Valor, puede ser color, alineación, tipo de fuente, tamaño…, es decir, especifican qué aspecto va a cambiar.

Ahora mostraremos unos ejemplos sobre cómo declararlo y hacerlo de forma correcta.

Podemos modificar varias propiedades a la vez, por ejemplo:

Y también podemos modificar varios elementos a la vez, por ejemplo:

Como podemos observar la información de los CSS puede ser ingresada por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, hay tres formas de dar estilo a un documento web:

Hoja de Estilo Externa

Esta se almacena en un archivo diferente al del archivo con el código HTML al cual estará vinculado a través de un link, que debe ir situado en la sección head. Es la manera de programar más eficiente, ya que separa completamente el formato de la página HTML de la estructura básica de la página, así como se muestra a continuación:

Sobre la cabecera del HTML, el bloque <head></head>, incluimos una relación al archivo CSS en cuestión:

De esta forma, te darás cuenta como se deben aplicar los estilos de este archivo (index.css) al documento HTML actual. Se aconseja escribir esta línea (sobre todo, antes de scripts), de esta manera aplicaremos los estilos cuanto antes y no tener conflictos con la página al no cargar por completo.

Hoja de Estilo Interna

Esta incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.

Esta manera de hacerlo nos puede servir en algunos casos, pero debemos tener en cuenta que si lo realizamos de esta manera no tendremos la ventaja de tener los estilos de nuestra página en un documento independiente, No hay que perder de vista que por lo general es preferible guardarlo en un archivo externo CSS.

Estilo en Línea

Sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Así como se muestra enseguida:

Esta forma de hacerlo como la forma anterior no se recomienda utilizarse solo que existan casos muy específicos. Sin embargo, es una opción que puede venir bien en algunos casos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *