Introducción a HTML y CSS

Jhon F. Martínez
Introducción a HTML y CSS

Internet está lleno de un sin fin de sitios, unos tan básicos que solo buscan mostrarnos una información concreta, y otros tan complejos que son una suite completa de herramientas y utilidades. 
Independientemente de su complejidad, todos ellos deben pasar por un navegador web, aquí es donde entran los diferentes lenguajes que el mismo navegador entiende e interpreta.
Por un lado tenemos HTML que es la base de los sitios web, este determina la estructura de los diferentes componentes que puede llegar a tener. Usando las siguientes analogías se puede entender mejor:
  • Los cimientos de una construcción
  • El chasis de un vehículo
  • El esqueleto humano

Luego aparece CSS, que toma la estructura HTML y basado en unas propiedades y valores moldea la parte visual de la misma.
Siendo consecuentes con las analogías mencionadas anteriormente en HTML , serían: 
  • La obra blanca, terminaciones y muebles de una construcción. 
  • La forma, color y acabados tanto de la carrocería como del interior del vehículo. 
  • La piel, el cabello, las formas, colores y facciones que tiene el cuerpo humano.

Vamos a hacer un ejemplo práctico para entender esto. 

Comenzando con HTML

Tenemos el siguiente sitio web:
(sitio muy básico visto desde Google Chrome)
Su código HTML es el siguiente:
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi página</title>
</head>
<body>
    <h1>Soy el encabezado más grande</h1>
    <h6>Soy el encabezado más pequeño</h6>
    <p>
        Soy un párrafo <br>
        que tiene <br>
        varias lineas.
    </p>
    <img src="bildu.png">
    <button>Soy un botón</button>
    <a href="https://bildu.company/es">Ir a Bildu</a>
</body>
</html>
¿Cómo se lee este código? aquí algunas particularidades:
  • Todas las etiquetas van encerradas entre signos de menor que y mayor que:
    • <body>
    • <button>
  • El nombre de la etiqueta hace referencia a una palabra en inglés que describe mínimamente su comportamiento:
    • <button> muestra un botón y su contenido es el texto.
    • <h1> muestra un encabezado, hay 6 tamaños siendo 1 el más grande y 6 el mas pequeño (heading / encabezado) .
    • <p> muestra un párrafo (paragraph / párrafo)
    • <a> muestra un enlace (anchor / ancla)

  • Casi todas tienen un inicio y un cierre, y este lo determina otra etiqueta con el mismo nombre pero con un  / después del menor que y antes del nombre.
    •  <div> ----  </div>
    •  <p> ------ </p> 

  •  La etiqueta <html> contiene 2 etiquetas clave:
    • <head> Es contenido que va mas dirigido al navegador que al cliente y en ella van los metadatos (información general interna para el navegador) y configuraciones. 
    • <body> En esta va todo el contenido visible de nuestro sitio.

  • La linea 4 <title>Mi página</title>no se esta viendo reflejada con el resto de contenido, esto se debe a que <title> está un dentro de <head> y este especifica el título para el navegador y se ve de la siguiente forma. 
(Título en pestaña de navegador web)
  • <img> y <br> pertenecen al pequeño grupo de etiquetas que no se cierran, en versiones pasadas de HTML se pueden ver casos en que el cierre se hace antes del mayor que (<br />, <img />) pero esto hoy en día se puede omitir.

  •  Algunas etiquetas tienen parámetros: 
    • <img>  tiene el parámetro src (source / origen) en el que se indica la ruta de la imagen que se desea mostrar.
    •  <a> tiene el parámetro href (hyperlink reference / referencia a hipervínculo) que recibe el enlace al que nos llevará dicho hipervínculo.

  • La linea 3 <meta charset="UTF-8"> es necesaria si vamos a utilizar caracteres como la "ñ" o letras acentuadas y tildes, ya que de otra forma el navegador no tendrá especificado que lo necesita y podría mostrar inconsistencias con estos símbolos.

Ahora algo de CSS

Son archivos que definen las propiedades visuales de los elementos de un sitio. 
Para lograr que una página se vea acorde a lo que queremos no basta solo con las etiquetas (HTML),  tenemos que definir que disposición, colores, tamaños, fuentes.... etc. Tendrán los elementos.
El navegador trae ciertos estilos por defecto como lo son botones y espaciados de algunos elementos (como la etiqueta p o los h), pero esto lo podemos modificar a nuestro antojo gracias a CSS.
Ahora tenemos este botón:
(Botón con estilo por defecto)
Su código es este:
<button>Soy un botón</button>
Vamos a aplicarle el siguiente estilo:
button {
    background-color: #2C264B;
    padding: 10px 5px;
    margin: 5px;
    border-radius: 5px;
    border: none;
    color: white;
}
El resultado será el siguiente:
(Botón con estilo aplicado)
Entonces, ¿Cómo funciona esto? 
En la primera línea de nuestro archivo está el selector “button”, seguido una apertura de llaves que indica el inicio del bloque, en este cada línea lleva una propiedad seguida de dos puntos con el valor de esa propiedad, y al final un punto y coma indicando el final de la línea.
Cada bloque de estilos fundamentalmente consta de un selector y unas propiedades con unos valores.
 
Selectores
En este caso estamos usando “button”, un selector por nombre de etiqueta, y afecta a todos los elementos que tengan ese nombre, de modo que siempre que llamemos <button> en nuestro HTML se le aplicará el estilo.
Pero, ¿y si solo quiero modificar un botón y no todos?, o si quiero tener más variantes del botón.
En este caso, tenemos otro tipo de selectores. Para explicarlo mejor vamos a utilizar más botones.
Ahora tenemos 5 botones:
<button>Soy un botón normal</button>
<button class="grande">Soy un botón grande</button>
<button class="gris">Soy un botón gris</button>
<button class="grande gris">Soy un botón grande y gris</button>
<button id="diferente">Soy un botón único y diferente</button>
Si miramos los botones 2 y 3 veremos que tienen un parámetro que se llama class y unos valores entre comillas dobles (botón 2: grande, botón 3: gris).
Estos valores se puede mezclar si los separamos con espacios, por esto el cuarto botón puede agrupar ambos  (botón 4: grande y gris).
De momento como no hemos modificado nuestro archivo, todos nuestros botones tienen el estilo que asignamos anteriormente:
(5 Botones con estilo base)
Siguiendo con nuestro código, vamos a usar algunos selectores de clase, solo basta con un punto seguido del nombre de la clase: (el punto debe ir pegado sin espacios:  .clase)
button {
    background-color: #2C264B;
    padding: 10px 5px;
    border-radius: 5px;
    border: none;
    color: white;
}

.grande {
    padding: 20px 10px;
}

.gris {
    background-color: grey;
}
Ahora nuestros botones se ven así:
(4 Botones con estilos por clase)


No nos podemos olvidar de nuestro último botón, si observamos, este en vez de class tiene id.
Este es un identificador y tiene una particularidad, el valor de ese id solo debe estar una vez en nuestro documento, para CSS puede que no afecte mucho, pero para otros casos como JavaScript (que también usa selectores) puede generar inconsistencias, así que debemos asegurarnos de que los nombres de los identificadores no se repitan.
 
Vamos a estilizar nuestro último botón, como es un selector de identificador a diferencia del de clase que usa un punto, este usa un símbolo de número #.
#diferente {
    background-color: white;
    padding: 12px 8px;
    color: #2C264B;
    border: 1px solid #2C264B;
}
Y el resultado con nuestros botones completos se vería así:
(5 Botones con estilos aplicados.)
Cabe destacar que todos los botones heredan propiedades del selector button ya que todos usan esa etiqueta y, a menos que sobre-escribamos una propiedad este la conservará, por eso el botón gris tiene las mismas dimensiones que el normal, y todos los botones tienen los bordes redondos.
 
Propiedades
Las propiedades hacen referencia directa a lo que modifican (con su nombre en inglés, separado por guiones si es una palabra compuesta), por ejemplo: la línea 2 de nuestro código: “background-color”, modificará el color de fondo del elemento. 
Algunas propiedades tienen atajos (o shorthands), como es el caso de la linea 5 “border” que puede recibir varios valores, en este caso recibe el grosor, la apariencia y el color en una sola linea. En realidad son 3 propiedades en una (“border-width”, “border-style” y “border-color”).
 
Valores
Dependiendo de las propiedades, son los valores que se le aplican a estas. Hay colores, unidades de longitud, de tiempo, valores con nombres propios y más.
 
Colores
Si leemos el valor de la siguiente línea:
background-color: #2C264B;
Veremos un código que representa el color de nuestro fondo.
Pero, ¿Qué pasa con ese código?
En la web los colores están representados por diferentes notaciones, que en su mayoría, se basan en la mezcla de intensidades de los colores: rojo, verde y azul. Algunas de las más usadas son:
  • RGB (Red Green Blue / Rojo Verde Azul)
    Se forma con la notación RGB() haciendo referencia directa a la intensidad de los colores rojo, verde y azul definidos por números que van de 0 a 255 separados por comas, en este orden de ideas si quisiéramos el color rojo mas intenso usaríamos rgb(255,0,0)
  • Hexadecimal
    Este usa el símbolo # seguido de 3 o 6 números del sistema hexadecimal
     (0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C, D, E, F) que indican las intensidades de rojo, verde y azul, si hay 3 los toma en ese orden, si hay 6 los toma en parejas. En este caso si quisiéramos el rojo más intenso bien podríamos escribir #FF0000 o #F00.
  • HSL (Hue, Saturation, Lightness / Matiz, Saturación, Luminosidad)
    A diferencia de los 2 anteriores que usan mezcla de rojo, verde y azul, este usa un color base y cambia su saturación y luminosidad en porcentajes, de este modo si quisieramos el mismo rojo de los 2 anteriores usaríamos: hsl(0, 100%, 50%)
  • Nombres propios
    Hay una gran variedad de colores que se pueden usar con su nombre (en inglés), si miramos la linea 6 del archivo tenemos “color: white;” haciendo referencia al color blanco.
    Para lograr el rojo acá, solo sería escribir: red

En la práctica se puede usar cualquiera, va más en comodidad del programador o del equipo de trabajo.
 
Longitudes
En la linea 3 de nuestro código está “padding”, es un atajo que recibe de 1 a 4 valores en una unidad de longitud y determinan el tamaño de relleno de nuestro elemento.
 
Podemos usar valores exactos como pixeles, pulgadas o centímetros o valores relativos como porcentajes y escalados de algunos valores base.
 

¿Cómo se combina HTML con CSS?

Hay 3 caminos para aplicar estilos a un elemento en HTML:
  • En Línea: Aplicaremos las propiedades y valores directamente sobre el elemento HTML con la propiedad style separados por punto y coma:

<button style="background-color: #0f0; color: #fff">
    Botón verde
</button>

  • Embebido:
    Los estilos irán dentro de una etiqueta style en el head del documento:

<html>
<head>
    <title>Mi página</title>
    <meta charset="UTF-8">
    <style>
        .boton-afirmativo {
            background-color: #0f0;
            color: #fff;
        }
    </style>
</head>
<body>
    <button class="boton-afirmativo">
        Botón afirmativo
    </button>
</body>
</html>
 
  • Externo:
    El archivo estará a parte de nuestro html, en un archivo formato .css, en el head se usará la etiqueta link con la propiedad rel y valor stylesheet y la ruta al archivo css será el valor de la propiedad href.

sitio.html

<html>
<head>
    <title>Mi página</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <button class="boton-afirmativo">
        Botón afirmativo
    </button>
</body>
</html> 
y en archivo a parte:
estilos.css

.boton-afirmativo {  
    background-color: #0f0;  
    color: #fff;
}

Con esto se podemos tener una idea de lo que es codificar HTML y CSS.
Hoy en día existen un sin fin de herramientas que omiten el tener que usar código (como los gestores de contenido, o los constructores de sitios desde interfaz), pero a la larga no son mas que capas que al final se transforman en HTML y CSS (y JS para algunos mas complejos).
 

Intereses