Si puedes, imagina una época anterior a la invención de Internet. Las páginas web no existían y los libros, impresos en papel y bien encuadernados, eran tu principal fuente de información. Había que esforzarse mucho -y leer- para encontrar la información exacta que se buscaba.
Hoy en día se puede abrir un navegador web, saltar al motor de búsqueda que se desee y buscar. Cualquier información imaginable está al alcance de tu mano. Y lo más probable es que alguien, en algún lugar, haya construido un sitio web con su búsqueda exacta en mente.
En este libro voy a mostrarle cómo construir sus propios sitios web utilizando los dos lenguajes informáticos más dominantes-HTML y CSS.
Antes de comenzar nuestro viaje para aprender a construir sitios web con HTML y CSS, es importante entender las diferencias entre ambos lenguajes, la sintaxis de cada uno de ellos y alguna terminología común.
¿Qué son HTML & CSS?
HTML, HyperText Markup Language, da estructura y significado al contenido definiendo ese contenido como, por ejemplo, encabezados, párrafos o imágenes. CSS, u hojas de estilo en cascada, es un lenguaje de presentación creado para dar estilo a la apariencia del contenido, utilizando, por ejemplo, fuentes o colores.
Los dos lenguajes -HTML y CSS- son independientes el uno del otro y deberían seguir siéndolo. El CSS no debe escribirse dentro de un documento HTML y viceversa. Como regla, HTML siempre representará el contenido, y CSS siempre representará la apariencia de ese contenido.
Con esta comprensión de la diferencia entre HTML y CSS, vamos a sumergirnos en HTML con más detalle.
Entendiendo los términos comunes de HTML
Mientras te inicias en HTML, es probable que te encuentres con nuevos -y a menudo extraños- términos. Con el tiempo se irá familiarizando con todos ellos, pero los tres términos comunes de HTML con los que debería empezar son elementos, etiquetas y atributos.
Elementos
Los elementos se identifican mediante el uso de paréntesis angulares menores y mayores, < >, que rodean el nombre del elemento. Así, un elemento tendrá el siguiente aspecto:
1 2
<a>
Etiquetas
El uso de paréntesis angulares menores y mayores que rodean un elemento crea lo que se conoce como 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 menos-que seguido del nombre de un elemento y termina con un signo más-que; por ejemplo, <div>.
Una etiqueta de cierre marca el final de un elemento. Consiste en un signo menos-que seguido de una barra diagonal y el nombre del elemento, y luego termina con un signo más-que; por ejemplo, </div>.
El contenido que queda entre las etiquetas de apertura y cierre es el contenido de ese elemento. Un enlace ancla, por ejemplo, tendrá una etiqueta de apertura de <a> y una etiqueta de cierre de </a>. Lo que caiga entre estas dos etiquetas será el contenido del enlace de anclaje.
Así, las etiquetas de anclaje tendrán un aspecto similar al siguiente:
1 2
<a>...</a>
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 class, que clasifica un elemento; el atributo src, que especifica una fuente de contenido incrustado; 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 de igual y luego un valor de atributo entre comillas. Por ejemplo, un elemento <a> que incluya un atributo href tendría el siguiente aspecto:
1 2
<a href="http://shayhowe.com/">Shay Howe</a>
Demostración de términos comunes de HTML
Vea el Pen Common HTML Terms por Shay Howe (@shayhowe) en CodePen.
El código anterior mostrará el texto «Shay Howe» en la página web y llevará a los usuarios a http://shayhowe.com/ al hacer clic en el texto «Shay Howe». El elemento ancla se declara con las etiquetas de apertura <a> y de cierre </a> que engloban el texto, y el atributo y el valor de referencia del hipervínculo se declaran con href="http://shayhowe.com" en la etiqueta de apertura.
Fig 1
Esquema de sintaxis de HTML que incluye un elemento, un atributo, y etiqueta
Ahora que sabes qué son los elementos, etiquetas y atributos de HTML, vamos a ver cómo montar nuestra primera página web. Si algo parece nuevo aquí, no te preocupes-lo iremos descifrando a medida que avancemos.
Configuración de la estructura del documento HTML
Los documentos HTML son documentos de texto plano guardados con una extensión de archivo .html en lugar de una extensión de archivo .txt. Para empezar a escribir HTML, lo primero que necesitas es un editor de texto plano con el que te sientas cómodo. Lamentablemente, esto no incluye Microsoft Word o Pages, ya que son editores de texto enriquecido. Dos de los editores de texto plano más populares para escribir HTML y CSS son Dreamweaver y Sublime Text. Las alternativas gratuitas también incluyen Notepad++ para Windows y TextWrangler para Mac.
La declaración del tipo de documento, o <!DOCTYPE html>, informa a los navegadores web de qué versión de HTML se está utilizando y se coloca al principio del documento HTML. Como vamos a utilizar la última versión de HTML, nuestra declaración de tipo de documento es simplemente <!DOCTYPE html>. Después de la declaración del tipo de documento, el elemento <html> significa el comienzo del documento.
Dentro del elemento <html>, el elemento <head> identifica la parte superior del documento, incluyendo cualquier metadato (información que acompaña a la página). El contenido del elemento <head> no se muestra en la propia página web. En su lugar, puede incluir el título del documento (que se muestra en la barra de título de la ventana del navegador), enlaces a cualquier archivo externo o cualquier otro metadato beneficioso.
Todo el contenido visible dentro de la página web estará dentro del elemento <body>. Un desglose de la estructura típica de un documento HTML tiene este aspecto:
Demo de la estructura del documento HTML
Vea la estructura del documento HTML de Pen por Shay Howe (@shayhowe) en CodePen.
El código anterior muestra el documento que comienza con la declaración del tipo de documento, <!DOCTYPE html>, seguido directamente por el elemento <html>. Dentro del elemento <html> vienen los elementos <head> y <body>. El elemento <head> incluye la codificación de caracteres de la página mediante la etiqueta <meta charset="utf-8"> y el título del documento mediante el elemento <title>. El elemento <body> incluye un encabezado mediante el elemento <h1> y un párrafo mediante el elemento <p>. Debido a que tanto el encabezado como el párrafo están anidados dentro del elemento <body>, son visibles en la página web.
Cuando un elemento se coloca dentro de otro elemento, también conocido como anidado, es una buena idea sangrar ese elemento para mantener la estructura del documento bien organizada y legible. En el código anterior, los elementos <head> y <body> estaban anidados -y con sangría- dentro del elemento <html>. El patrón de sangría de los elementos continúa a medida que se añaden nuevos elementos dentro de los elementos <head> y <body>.
Elementos de cierre automático
En el ejemplo anterior, el elemento <meta> sólo tenía una etiqueta y no incluía una etiqueta de cierre. No temas, esto fue intencional. No todos los elementos constan de etiquetas de apertura y cierre. Algunos elementos simplemente reciben su contenido o comportamiento de los atributos dentro de una sola etiqueta. El elemento <meta> es uno de estos elementos. El contenido del elemento <meta> anterior se asigna con el uso del atributo charset y el valor. Otros elementos de autocierre comunes son
<br>
<embed>
<embed>.
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>
La estructura aquí esbozada, haciendo uso del tipo de documento <!DOCTYPE html> y de los elementos <html><head>, y <body>, es bastante común. Querremos tener esta estructura de documento a mano, ya que la usaremos a menudo cuando creemos nuevos documentos HTML.
Validación de código
No importa lo cuidadosos que seamos al escribir nuestro código, inevitablemente cometeremos errores. Por suerte, al escribir HTML y CSS tenemos validadores para comprobar nuestro trabajo. El W3C ha creado validadores de HTML y CSS que analizan el código en busca de errores. La validación de nuestro código no sólo ayuda a que se renderice correctamente en todos los navegadores, sino que también nos ayuda a enseñar las mejores prácticas para escribir código.
En la práctica
Como diseñadores web y desarrolladores frontales, tenemos el lujo de asistir a una serie de grandes conferencias dedicadas a nuestro oficio. Vamos a inventarnos nuestra propia conferencia, Styles Conference, y a construir una web para ella a lo largo de las siguientes lecciones.
Fig 1
Nuestros primeros pasos en la construcción de nuestro sitio web de la Conferencia de Estilos
Cambiemos un poco de marcha, alejándonos del HTML, y echemos un vistazo al CSS. Recuerda que HTML definirá el contenido y la estructura de nuestras páginas web, mientras que CSS definirá el estilo visual y la apariencia de nuestras páginas web.
Entendiendo los términos comunes de CSS
Además de los términos de HTML, hay algunos términos comunes de CSS con los que querrás familiarizarte. Estos términos incluyen selectores, propiedades y valores. Al igual que con la terminología HTML, cuanto más trabajes con CSS, más se convertirán estos términos en algo natural.
Selectores
Cuando se añaden elementos a una página web, se les puede aplicar un estilo mediante CSS. Un selector designa exactamente qué elemento o elementos dentro de nuestro HTML para apuntar y aplicar estilos (como el color, el tamaño y la posición). Los selectores pueden incluir una combinación de diferentes calificadores para seleccionar elementos únicos, todo depende de lo específicos que queramos ser. Por ejemplo, podemos querer seleccionar todos los párrafos de una página, o podemos querer seleccionar sólo un párrafo específico de una página.
Los selectores generalmente se dirigen a un valor de atributo, como un id o class, o se dirigen al tipo de elemento, como <h1> o <p>.
Dentro de CSS, los selectores van seguidos de corchetes, {}, que engloban los estilos que se aplicarán al elemento seleccionado. El selector aquí se dirige a todos los elementos <p>.
1 2
p { ... }
Propiedades
Una vez seleccionado un elemento, una propiedad determina los estilos que se aplicarán a ese elemento. Los nombres de las propiedades van después de un selector, entre corchetes, {}, e inmediatamente antes de dos puntos, :. Hay numerosas propiedades que podemos utilizar, como backgroundcolorfont-sizeheight, y width, y a menudo se añaden nuevas propiedades. En el siguiente código, estamos definiendo las propiedades color y font-size para que se apliquen a todos los elementos <p>.
1 2 3 4 5
p { color: ...; font-size: ...; }
Valores
Hasta ahora hemos seleccionado un elemento con un selector y hemos determinado qué estilo queremos 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 color como orange y el valor de la propiedad font-size como 16 píxeles.
1 2 3 4 5
p { color: orange; font-size: 16px; }
Para repasar, en CSS nuestro conjunto de reglas comienza con el selector, que va inmediatamente seguido de llaves. Dentro de estas llaves hay declaraciones que consisten en pares de propiedades y valores. Cada declaración comienza con una propiedad, que es seguida por dos puntos, el valor de la propiedad, y finalmente un punto y coma.
Es una práctica común sangrar los pares de propiedades y valores dentro de las llaves. Al igual que con HTML, estas sangrías ayudan a mantener nuestro código organizado y legible.
Fig 1
Esquema de la sintaxis de CSS incluyendo un selector, propiedades, y valores
Conocer algunos términos comunes y la sintaxis general de CSS es un gran comienzo, pero tenemos algunos elementos más que aprender antes de entrar en profundidad. Específicamente, tenemos que echar un vistazo más de cerca a cómo funcionan los selectores dentro de CSS.
Trabajando con selectores
Los selectores, como se mencionó anteriormente, indican qué elementos HTML están siendo estilizados. Es importante entender completamente cómo usar los selectores y cómo pueden ser aprovechados. El primer paso es familiarizarse con los diferentes tipos de selectores. Empezaremos con los selectores más comunes: selectores de tipo, clase e ID.
Selectores de tipo
Los selectores de tipo se dirigen a los elementos por su tipo de elemento. Por ejemplo, si deseamos apuntar a todos los elementos de división, <div>, usaríamos un selector de tipo de div. El siguiente código muestra un selector de tipo para elementos de división, así como el correspondiente HTML que selecciona.
CSS
1 2
div { ... }
HTML
1 2 3
<div>...</div> <div>...</div>
Selectores de clase
Los selectores de clase nos permiten seleccionar un elemento en función del valor del atributo class del elemento. Los selectores de clase son un poco más específicos que los selectores de tipo, ya que seleccionan un grupo particular de elementos en lugar de todos los elementos de un tipo.
Los selectores de clase nos permiten aplicar los mismos estilos a diferentes elementos a la vez utilizando el mismo valor del atributo class en múltiples elementos.
En CSS, las clases se indican con un punto inicial, ., seguido del valor del atributo class. Aquí el selector de clase seleccionará cualquier elemento que contenga el valor del atributo class de awesome, incluyendo tanto elementos de división como de párrafo.
Los selectores de ID son aún más precisos que los selectores de clase, ya que se dirigen a un único elemento a la vez. Al igual que los selectores de clase utilizan el valor del atributo class de un elemento como selector, los selectores de ID utilizan el valor del atributo id de un elemento como selector.
Independientemente del tipo de elemento en el que aparezcan, los valores de los atributos id sólo pueden utilizarse una vez por página. Si se utilizan, deben reservarse para elementos significativos.
Dentro de CSS, los selectores ID se indican con un signo de almohadilla inicial, #, seguido del valor del atributo id. Aquí el selector de ID sólo seleccionará el elemento que contenga el valor del atributo id de shayhowe.
CSS
1 2
#shayhowe { ... }
HTML
1 2
<div>...</div>
Selectores adicionales
Los selectores son extremadamente poderosos, y los selectores aquí expuestos son los más comunes con los que nos encontraremos. Estos selectores son también sólo el principio. Existen muchos selectores más avanzados y están fácilmente disponibles. Cuando te sientas cómodo con estos selectores, no tengas miedo de buscar algunos de los selectores más avanzados.
Muy bien, todo empieza a encajar. Añadimos elementos a una página dentro de nuestro HTML, y luego podemos seleccionar esos elementos y aplicarles estilos usando CSS. Ahora vamos a conectar los puntos entre nuestro HTML y CSS, y conseguir que estos dos lenguajes trabajen juntos.
Referenciando CSS
Para conseguir que nuestro CSS hable con nuestro HTML, necesitamos referenciar nuestro archivo CSS dentro de nuestro HTML. La mejor práctica para referenciar nuestro CSS es incluir todos nuestros estilos en una única hoja de estilo externa, a la que se hace referencia desde el elemento <head> de nuestro documento HTML. El uso de una única hoja de estilo externa nos permite utilizar los mismos estilos en todo un sitio web y realizar rápidamente cambios en todo el sitio.
Otras opciones para añadir CSS
Otras opciones para referenciar CSS incluyen el uso de estilos internos y en línea. Es posible que te encuentres con estas opciones en la naturaleza, pero generalmente son mal vistas, ya que hacen que la actualización de los sitios web sea engorrosa y poco manejable.
Para crear nuestra hoja de estilo CSS externa, querremos utilizar nuestro editor de texto de elección de nuevo para crear un nuevo archivo de texto plano con una extensión de archivo .css. Nuestro archivo CSS debe guardarse dentro de la misma carpeta, o una subcarpeta, donde se encuentra nuestro archivo HTML.
Dentro del elemento <head> del documento HTML, el elemento <link> se utiliza para definir la relación entre el archivo HTML y el archivo CSS. Como estamos enlazando al CSS, utilizamos el atributo rel con un valor de stylesheet para especificar su relación. Además, el atributo href (o referencia de hipervínculo) se utiliza para identificar la ubicación, o ruta, del archivo CSS.
Considere el siguiente ejemplo de un documento HTML <head> elemento que hace referencia a una única hoja de estilo externa.
Para que el CSS se renderice correctamente, la ruta del valor del atributo href debe correlacionarse directamente con el lugar donde se guarda nuestro archivo CSS. En el ejemplo anterior, el archivo main.css se almacena dentro de la misma ubicación que el archivo HTML, también conocido como el directorio raíz.
Si nuestro archivo CSS está dentro de un subdirectorio o subcarpeta, el valor del atributo href necesita correlacionarse con esta ruta en consecuencia. Por ejemplo, si nuestro archivo main.css estuviera almacenado dentro de un subdirectorio llamado stylesheets, el valor del atributo href sería stylesheets/main.css, utilizando una barra diagonal para indicar que se mueve en un subdirectorio.
En este punto nuestras páginas empiezan a cobrar vida, lenta pero seguramente. No hemos profundizado demasiado en el CSS, pero habrás notado que algunos elementos tienen estilos por defecto que no hemos declarado dentro de nuestro CSS. Es decir, el navegador impone sus propios estilos CSS preferidos para esos elementos. Afortunadamente, podemos sobrescribir estos estilos con bastante facilidad, que es lo que vamos a hacer a continuación utilizando resets de CSS.
Usando Resets de CSS
Cada navegador web tiene sus propios estilos por defecto para diferentes elementos. La forma en que Google Chrome representa los encabezados, los párrafos, las listas, etc., puede ser diferente de cómo lo hace Internet Explorer. Para garantizar la compatibilidad entre navegadores, se han generalizado los reseteos de CSS.
Los reseteos de CSS toman cada elemento HTML común con un estilo predefinido y proporcionan un estilo unificado para todos los navegadores. Estos reajustes generalmente implican la eliminación de cualquier tamaño, márgenes, rellenos o estilos adicionales y la reducción de estos valores. Debido a que el CSS va en cascada de arriba a abajo -más sobre esto pronto- nuestro restablecimiento necesita estar en la parte superior de nuestra hoja de estilo. Esto garantiza que esos estilos se lean primero y que todos los navegadores web trabajen a partir de una línea de base común.
Hay un montón de resets diferentes disponibles para usar, todos los cuales tienen sus propias fortalezas. Uno de los resets más populares es el de Eric Meyer, que ha sido adaptado para incluir estilos para los nuevos elementos de HTML5.
Si te sientes un poco más aventurero, también está Normalize.css, creado por Nicolas Gallagher. Normalize.css no se centra en el uso de un restablecimiento duro para todos los elementos comunes, sino en el establecimiento de estilos comunes para estos elementos. Requiere una mayor comprensión de CSS, así como la conciencia de lo que le gustaría que sus estilos sean.
Compatibilidad entre navegadores & Pruebas
Como se mencionó anteriormente, los diferentes navegadores renderizan los elementos de diferentes maneras. Es importante reconocer el valor de la compatibilidad entre navegadores y las pruebas. Los sitios web no necesitan verse exactamente igual en todos los navegadores, pero deberían estar cerca. Qué navegadores desea soportar, y en qué grado, es una decisión que tendrá que tomar en base a lo que es mejor para su sitio web.
En total hay un puñado de cosas a tener en cuenta al escribir CSS. La buena noticia es que todo es posible, y con un poco de paciencia lo resolveremos.
En la práctica
Recogiendo el punto donde lo dejamos por última vez en nuestra web de conferencias, vamos a ver si podemos añadir un poco de CSS.
Es hora de comprobar nuestro trabajo y ver si nuestro HTML y CSS se llevan bien. Ahora abriendo nuestro archivo index.html (o refrescando la página si ya está abierta) dentro de un navegador web debería mostrar resultados ligeramente diferentes a los anteriores.
Fig 1
Nuestro sitio web de la Conferencia de Estilos con un restablecimiento del CSS
Demo & Código fuente
Abajo puedes ver la web de la Conferencia de Estilos en su estado actual, así como descargar el código fuente de la web en su estado actual.
Ver el sitio web de la Conferencia de Estilos o descargar el código fuente (archivo Zip)
Resumen
¡Hasta aquí, todo bien! Hemos dado unos cuantos pasos importantes en esta lección.
Piensa que ahora conoces los fundamentos de HTML y CSS. A medida que continuemos y pases más tiempo escribiendo HTML y CSS, te sentirás mucho más cómodo con los dos lenguajes.
Para recapitular, hasta ahora hemos cubierto lo siguiente:
La diferencia entre HTML y CSS
Conocer los elementos, etiquetas y atributos de HTML
Configurar la estructura de tu primera página web
Conocer los selectores de CSS, propiedades, y valores
Trabajando con selectores CSS
Referenciando CSS en tu HTML
El valor de los reinicios CSS
Ahora vamos a echar un vistazo más de cerca al HTML y a aprender un poco sobre la semántica.
