La programación es una disciplina muy amplia que ofrece cientos de posibilidades a la hora de configurar una web. Uno de sus componentes más conocidos es HTML, pues es el lenguaje de marcado a partir del cual se define todo el contenido que vemos en las páginas, y junto a él está el CSS, orientado hacia su diseño y apariencia. De hecho, aunque muchas personas desconocen qué es HTML y CSS, es muy probable que disfruten a diario de sus aplicaciones al navegar por la red.
¿Qué es HTML y CSS?
De manera coloquial, HTML es el lenguaje con el que se “escribe” la inmensa mayoría de páginas web a las que se accede desde internet. Los programadores las crean y más tarde, cuando los usuarios acceden a ellas a través de un navegador, este interpreta dicho lenguaje para mostrarlo de forma clara y ordenada.
HTML son las siglas de HyperText Markup Language, es decir, lenguaje de marcado de hipertexto, que constituye un estándar asumido y reconocido a nivel mundial. Sus normas las establece una entidad sin fines de lucro llamada World Wide Web Consortium (W3C) que lo define como «un lenguaje reconocido universalmente y que permite publicar información de forma global».
No hay que confundir la función de HTML con la de otros instrumentos en el desarrollo web. En este caso se limita a la estructura del texto contenido dentro de cada página, es decir, la forma en la que se distribuye (títulos, párrafos, saltos de línea, entre otros). También se aplican algunos detalles elementales de estilo como negritas, cursivas o viñetas.
En cuanto a CSS (del inglés Cascading Style Sheets u “hojas de estilo en cascada”), es el lenguaje de marcado que determina el aspecto con el que se visualiza el contenido de un sitio web. Esto pasa por elementos como el color, estilos de letra o imágenes, entre muchos otros, y su código se conjuga con el de HTML para crear páginas completas.
Cómo funciona HTML
El lenguaje de marcado de hipertexto se basa en “distintivos” conocidos como etiquetas o tags con los cuales estructura el texto. Estos se colocan antes y después de cada elemento al que definen, y su característica principal es que se indican entre corchetes(<>).
| Te damos un ejemplo de etiqueta HTML para el título de este artículo, que va así: <Title>Qué es HTML y CSS: los básicos del desarrollo web</Title> |
Esto indica a cualquier navegador en el que estés leyendo que debe mostrar ese texto como el encabezado principal.
Lo que has visto arriba es un tipo de elemento, y se compone de la etiqueta, que en este caso corresponde a <Title>, y el contenido, que es el texto dentro de ella.
Si ahondamos un poco más llegamos hasta el atributo, es decir, lo que va dentro de los corchetes. Aunque en el ejemplo son solo letras (Title), también puede incluir símbolos y números. En la etiqueta de cierre se coloca una barra inclinada para indicar que es el final (</Title>).
Un dato curioso sobre los atributos es que no distinguen entre mayúsculas y minúsculas. Así, el código anterior podría ir como <Title>, <TITLE> o <title> sin alterar el contenido ni su distribución.
Etiquetas básicas de HTML
Aunque es casi imposible describir todas las etiquetas que ofrece el lenguaje HTML, sí que podemos hacer un resumen con las más importantes, que son:
- <html>: indica el inicio del documento HTML.
- <head>: contiene información de la página que no es visible para los visitantes, pero sirve para que los navegadores identifiquen lo que hay en ella.
- <body>: es la parte visible de la web y engloba todo el contenido disponible, incluidos textos, imágenes, tablas, etc.
- <div>: divide el contenido en bloques separados por espacios. Estos bloques pueden tener párrafos, imágenes, vídeos, etc. A veces una misma etiqueta <div> tiene otras dentro de ella.
- <br>:crea un salto de línea, pero sin dejar un espacio de por medio.
- <h1>, <h2>…<h6> : marcan los títulos y subtítulos dentro del documento y sirven para jerarquizar la información, así como indicar a los buscadores lo que contiene cada apartado.
- <a>: define los hipervínculos o links dentro y fuera de la web.
- <p>: agrupa el texto en un párrafo.
- <i>: cursiva.
- <b> y <strong>: negrita.
- <u>: subrayado.
Ventajas y desventajas de HTML
HTML representa la parte más elemental de cualquier web. A partir de ella se integran todos los lenguajes de programación y elementos multimedia que conforman la página. Por esta razón tiene muchas ventajas, pero también se queda a medio camino cuando se trata de crear un sitio completo. Te contamos lo mejor y lo no tan bueno de este lenguaje:
Pros
- Es reconocido por cualquier navegador y tiene un alcance universal.
- Es muy sencillo de aprender y personas sin conocimientos previos en desarrollo web pueden dominarlo en poco tiempo.
- Los archivos son pequeños.
- Se integra a la perfección con los lenguajes de programación más usados.
- Tiene soporte del W3C.
- Es un código abierto y gratuito.
Contras
- Es estático y por sí mismo no permite añadir elementos dinámicos.
- Su carga es lenta y no todos los navegadores lo interpretan de la misma forma, lo que puede dar lugar a errores de visualización.
- Se debe escribir cada página de manera individual, aunque se trate de la misma estructura o formato.
- Las opciones de personalización son limitadas.
Cómo funciona CSS
El mecanismo CSS se basa en “reglas predeterminadas” (o simplemente “reglas”) que permiten dar formato a los distintos elementos del lenguaje HTML. Sus componentes son:
- Selector: identifica dónde se aplicarán los cambios y tiene el mismo nombre que en el código HTML. Después de indicarlo, el resto de elementos va dentro de corchetes.
- Propiedad: se refiere al atributo que se va a modificar. Por ejemplo, si el selector especifica que se trata de un título, la propiedad puede ser el color o el tipo de fuente de dicho título.
- Valor: es la característica de la propiedad. Siguiendo con el ejemplo anterior, podríamos referirnos al verde, en el caso del color, o Arial, para la fuente.
Las propiedades y el valor van separados entre sí por dos puntos ortográficos (:) y juntos conforman una declaración. A su vez, las declaraciones se separan con punto y coma (;).
| Si tomáramos nuestro título, su expresión en CSS sería algo como esto: Title { color : black ; font – family : TwcenMT } |
Lo anterior es un ejemplo muy resumido de como se ve un código CSS considerando solo dos declaraciones. Sin embargo, el formato de los elementos de cualquier página web suele llevar muchas más, lo que crea un código más extenso.
¿Por qué en cascadas?
El nombre de hojas en cascadas proviene de la forma en cómo el CSS jerarquiza la aplicación del formato a los distintos elementos de una web. Esto es de utilidad cuando varias reglas entran en conflicto a la hora de definir el aspecto.
Con CSS la prioridad la tienen las declaraciones que afectan a los elementos internos del código HTML. Después están las hojas de estilo, que configuran el diseño de forma más general y pueden ser externas (en un archivo enlazado al código) o internas (en el apartado de <style>, justo después de <head>). Por último están los criterios por defecto que aplica el navegador.
Ventajas y desventajas de CSS
Al igual que sucede con el HTML y cualquier otro tipo de lenguaje de marcado, CSS tiene pros y contras que pueden incidir en mayor o menor medida sobre la programación y el resultado. Resumimos.
Pros
- Facilita la creación de la web, pues las configuraciones de aspecto se pueden manejar aparte de las de contenido.
- Ahorra tiempo al permitir juntar el código de diseño en un solo archivo y aplicarlo a todas las páginas sin tener que hacerlo de forma individual.
- Se pueden manejar distintas hojas de estilo de acuerdo con el dispositivo en que se va a visualizar la web.
- Los archivos son ligeros y consumen poco ancho de banda, por lo que la carga de la página es rápida.
Contras
- Es posible que surjan problemas con la visualización de ciertas propiedades y se aplique la configuración por defecto del navegador, dejando inútil el esfuerzo puesto en escribir el código.
Cómo aprender HTML y CSS
Los conocimientos de estos dos lenguajes de marcado son indispensables para cualquier persona que quiera iniciarse en la programación web. En la actualidad, como sucede con muchas de las profesiones relacionadas con las tecnologías de la información, la oferta de carreras universitarias en esta área se ha quedado rezagada. Las academias especializadas, en cambio, siguen más de cerca el ritmo de los avances tecnológicos y las necesidades de formación.
| Los cursos de diseño web, como el que te ofrecemos en ESDIMA, son la mejor forma de adquirir las destrezas necesarias para desenvolverte en este mundo. No solo condensan la información, sino que son esencialmente prácticos y se mantienen actualizados según las nuevas tendencias. |
Si te preguntabas qué es HTML y CSS, seguro que ahora tienes el panorama más claro. Y es que estos dos lenguajes van de la mano en el entorno web, pues uno se encarga del contenido y el otro de su presentación. De esta forma funcionan de manera complementaria y configuran la gran mayoría de páginas en la actualidad, por lo que representan la base de conocimientos de cualquier programador que se precie.
Es una herramienta sumamente potente
Me encantaría aprender sobre esos códigos de las plantillas donde se puede determinar el color, los, estilos de letra, banners, menus de un sitio web. Entiendo que esas son las hojas de estilo CSS y aunque a simple vista me parece bastante complejo, igual espero poder llevar el curso para aprender sobre eso. Gracias por la l información.