HTML y CSS son dos lenguajes fundamentales para crear cualquier página web. ¿Cual es la diferencia?
Antes que nada, hay que decir que HTML y CSS no son lo mismo, pero ¡funcionan como un equipo! Juntos forman la piel y los huesos de cualquier página web. Vamos a analizarlos individualmente, y luego veremos cómo trabajan juntos…
HTML es el acrónimo de Hypertext Markup Language. Piensa en HTML como el esqueleto del documento. HTML es lo que le da la estructura a la web. Todo se hace a través de etiquetas, elementos y atributos. Si quieres títulos, listas, imágenes o enlaces, con HTML puedes hacerlo todo.
Empecemos con un documento HTML básico.
<!DOCTYPE html>
<html>
<head>
<title>Welcome to One Month</title>
</head>
<body>
<h1>Big Willie Style</h1>
<img src=https://i.imgur.com/Vr37Ac3.jpg>
</body>
</html>
El !DOCTYPE en la primera línea le dice al navegador qué tipo de documento está analizando. En este caso, es un documento HTML. La tercera línea es la sección principal, y a continuación puedes ver la etiqueta del título. Ahí es donde pondrías el título de tu web. En este caso, el título del documento es «Welcome to One Month.» Como hemos hecho nosotros, podrías agregar dentro del cuerpo (líneas 6-9) una etiqueta H1 que pone el texto en su interior en estilo H1, la etiqueta de título más grande que hay.
¡Etiquétalo!
¡Aquí tienes otras etiquetas populares!
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Estas etiquetas sirven para los títulos, ¡al igual que las que están en este post! H1 es la etiqueta de título más grande, por lo que tiene el texto más grande. H6 es la etiqueta de título más pequeña así que, ya lo sabes, es la opción de texto del título más pequeño.
<p>
Texto del párrafo
<br>
Salto de línea
<img>
La etiqueta img sirve para insertar imágenes en tu web
<video>
Evidentemente la etiqueta video sirve para añadir vídeos.
<a href>
Esta se usa para añadir enlaces, y la etiqueta significa anchor (ancla)
<strong>
Negrita
<em>
Cursiva
<ul>
Listas no ordenadas
<ol>
Listas ordenadas
Etiquetas hijas
Si estás escribiendo una lista no ordenada <ul> (con viñetas) o una lista ordenada <ol> (numerada), ¡sin duda las listas necesitarán elementos! Para ello, utilizamos la etiqueta lista <li>. La <li> es hija de cualquiera de las dos etiquetas <ul> o <ol>. Así que una lista con viñetas de nuestras comedias favoritas de los ’90 quedaría más o menos así…
<ul>
<li>Seinfeld</li>
<li>Friends</li>
<li>Frasier</li>
<li>Growing Pains</li>
</ul>
CSS
CSS es un acronimo de Cascading Style Sheet (hoja de estilos en cascada).
Si HTML es el esqueleto de nuestra página, CSS es la piel.
Sin CSS tus webs se verían bastante aburridas, sosas y hasta desnudas. En CSS hay una propiedad y un valor. La propiedad es el atributo que quieres cambiar, mientras que el valor es cuanto quieres cambiarlo.
Volvamos a nuestro ejemplo de HTML.
Mira la etiqueta <body>. Podemos aumentar el cuerpo HTML con CSS añadiendo detalles. Por ejemplo, digamos que queremos cambiar el color del cuerpo. Quedaría más o menos así…
body {
background: red;
}
O supongamos que queremos cambiar el color y el tamaño de un texto cualquiera que hemos puesto en el cuerpo.
Se veria asi…
body {
font-size: 25px; background: blue; color: orange;
}
O bien, supongamos que queremos cambiar los atributos de la etiqueta H1. Podríamos hacer algo así…
H1 {
color: blue; font-size: 100px
}
Usar los nombres de los colores está bien, pero si queremos elegirlos en una paleta más variada, podríamos usar el sistema hexadecimal (#RRGGBB).
Sin embargo, para aprovechar las impresionantes posibilidades disponibles en CSS, tenemos que vincularle nuestro HTML. Lo hacemos a través del siguiente código:
<link rel=”stylesheet” type=”text/css” href=”main.css”/>
Como ves, indica que hay una relación (rel) entre el HTML y el CSS.
Otra forma en la que podemos implementar CSS es utilizando la propiedad font-family. Es lo mismo que utilizar un editor de texto para cambiar la fuente.
Esto se hace incluyendo en el código lo que sigue:
h1 {
font-family: Arial
}
Caso de estudio: CSS Zen Garden
CSS Zen Garden es un ejemplo increíble de la relación entre los dos lenguajes.
CSS Zen Garden demuestra el poder de CSS. Haciendo click en los enlaces de la derecha se va a cargar la misma página con una diferencia apreciable, el CSS. Esto resalta lo que puede hacer CSS para cambiar el aspecto y el estilo de la página.
Aquí tienes algunos ejemplos…
Lo más importante del tutorial
¿Qué hemos aprendido?
- HTML puede existir solo, CSS no, pero es cuando están juntos que nace la magia.
- Cuanto más aprendemos sobre cada lenguaje, más creativos podemos ser con nuestros diseños. Con la estructura correcta, las opciones son infinitas.
- HTML es el sustantivo; CSS es el verbo. ¡Vamos a formar frases!
¡Aprende HTML y CSS ya!
Si quieres seguir tu viaje con HTML y CSS, aquí tienes algunos recursos:
- Aprende a codificar HTML y CSS – este curso online de programación te convertirá en un desarrollador de nivel intermedio en tan solo 30 días. El curso incluye soporte humano, vídeos, proyectos reales, calificaciones y una certificación de HTML y CSS después de terminar el curso.
- Desarrolladores de frontend y de backend – ¿Cual es el sueldo de un desarrollador de frontend? ¿Y de uno de backend? ¿Cual es más fácil? Estas son buenas preguntas para hacerse al inicio. Lee este artículo para averiguar las respuestas.
- Como aprender Javascript – Ahora que entiendes HTML y CSS, ¿qué es Javascript y cómo puedes aprenderlo?
