¡Hola! Si deseas dar tus primeros pasos por el interesante mundo del desarrollo web, lo primero que deberías hacer es aprender HTML y CSS porque ambos son esenciales para crear una página web.

En este artículo encontrarás una breve introducción a los fundamentos de ambos lenguajes y luego encontrarás nuestro curso gratuito de 5+ horas sobre HTML y CSS en YouTube, el cual abarca más contenido y ejemplos prácticos.

¡Comencemos! ✨

🔹 HTML y CSS: Descripción y Uso

Veamos el propósito de HTML y CSS:

  • HTML es un lenguaje de marcado esencial para el desarrollo web porque nos permite definir la estructura de la página web, el contenido que se va a mostrar en el navegador. Sus siglas significan "HyperText Markup Language" en inglés (Lenguaje de Marcado de Hipertexto).
  • CSS es un lenguaje basado en reglas que nos permite asignar estilos a los elementos de nuestra página web. Sus siglas significan "Cascading Style Sheets" en inglés (Hojas de Estilo en Cascada).

HTML trabaja en conjunto con CSS para crear las páginas web que usamos todos los días en el navegador. Algunas páginas web interactivas también usan JavaScript.

💡 Dato: Los archivos HTML tienen extensión .html y los archivos CSS tienen extensión .css. Piensa que en este momento estás viendo una página web que fue creada con HTML y CSS.

🔸 Herramientas de Desarrollo de Chrome

Algo muy interesante es que puedes ver la estructura de los archivos HTML y CSS de cualquier página web en Google Chrome haciendo clic derecho en la página y seleccionando "inspect".

Esto abrirá las Herramientas de Desarrollo de Google Chrome, donde podrás ver dos secciones principales, las cuales se presentan en la siguiente imagen:

  • La parte superior contiene el código HTML. Se muestra en naranja en la siguiente imagen.
  • La parte inferior contiene los estilos aplicados con CSS al elemento seleccionado. Se muestra en verde en la siguiente imagen.
chrome-dev-tools
Herramientas de Desarrollo de Chrome

🔹 Introducción a HTML

Ahora comencemos a ver los fundamentos de HTML. Aquí tenemos un ejemplo de una página web muy sencilla:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <h1>Mi página web</h1>
    <p>Estoy aprendiendo desarrollo web.</p>
  </body>
</html>
Ejemplo

💡 Tip: En HTML, la indentación (el espacio o sangría que colocamos antes de las líneas) es muy importante porque nos permite distinguir visualmente la estructura de la página web en el archivo. Aunque no es obligatoria, se recomienda usarla para comprender más fácilmente la estructura de la página. Se recomienda dejar 2 espacios por cada nivel de indentación.

Veamos los componentes principales que puedes usar en HTML:

Elementos

Un archivo HTML está conformado por elementos HTML. Estos elementos son componentes individuales en HTML que nos permiten crear la estructura de la página.

Este es un ejemplo de un elemento:

<h1>Mi página web</h1>

💡 Tip:  Ciertos elementos pueden contener a otros elementos y crear estructuras más complejas. Al anidar los elementos uno dentro del otro, se debería indentar los elementos internos para reflejar esta estructura, como en nuestro ejemplo anterior.

Etiquetas

Cada elemento tiene una etiqueta asociada. Podemos crear un elemento usando su etiqueta en nuestro archivo HTML.

Estos son ejemplos de etiquetas usadas comúnmente:

  • <html> - todo el contenido de la página debe estar entre estas etiquetas.
  • <head> - este elemento contiene el título de la página que puedes ver en la pestaña de tu navegador y además contiene metadatos.
  • <body> - este elemento contiene todos los elementos visibles de la página web. Toda la estructura de la página debe estar entre estas etiquetas.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - estos elementos representan encabezados o títulos de mayor a menor importancia o nivel en la página web.  
  • <p> - un párrafo.
  • <a> - un enlace a otra página web o a secciones internas de tu página web.
  • <strong> - esta etiqueta te permite resaltar texto importante. Usualmente se muestra en negrita.
  • <em> - esta etiqueta te permite resaltar texto importante. Usualmente se muestra en cursiva.
  • <form> - este elemento te permite crear un formulario.
  • <hr> - una línea horizontal que puede ser usada para separar párrafos o secciones de tu página web.
  • <input> - un elemento que te permite crear formularios porque puede tomar texto o actuar como un botón de radio o una casilla de verificación.
  • <footer> - un pie de página.

La mayoría de los elementos en HTML tienen una etiqueta de apertura y una etiqueta de cierre. Entre ambas etiquetas se escribe el contenido del elemento.

En el ejemplo anterior estamos creando un elemento de tipo <h1> (un encabezado de nivel 1):

<h1>Mi página web</h1>

Este elemento tiene una etiqueta de apertura y una etiqueta de cierre para rodear su contenido.

  • La etiqueta de apertura es <h1>
  • La etiqueta de cierre es </h1>.

Como puedes ver en el siguiente diagrama:

image-29

💡 Dato: la diferencia entre la etiqueta de apertura y la etiqueta de cierre es que la etiqueta de cierre tiene una barra antes del tipo de elemento.

Sin embargo, algunos elementos no necesitan una etiqueta de cierre porque no actúan como contenedores. Entre ellos se incluyen las imágenes:

<img src="freeCodeCamp.jpg">

Atributos

Los elementos HTML pueden tener atributos que nos permiten describir información adicional sobre el elemento. Estos incluyen class, id, style, lang, src, y href.

Aquí tenemos un ejemplo de un elemento HTML con el atributo class:

<h1 class="titulo-principal">Mi Página Web</h1>
  • Los atributos deben ser escritos en la etiqueta de apertura, antes del paréntesis angular de cierre.
  • Los atributos están separados por un signo igual = de su valor. A la izquierda escribimos el nombre del atributo y a la derecha especificamos su valor. En este ejemplo, el valor es titulo-principal.
  • El valor del atributo debe estar rodeado por comillas.

💡 Dato: Cada tipo de elemento tiene un conjunto específico de atributos que podemos asignar y cada atributo tiene un conjunto de valores posibles.

Idioma

Puedes especificar el idioma principal de la página web o de cualquier elemento en la estructura con el atributo lang y el código correspondiente del idioma:

<html lang="es">

Enlaces

En HTML puedes crear enlaces a otras páginas web y a secciones internas de tu página web con el elemento <a> y el atributo href.

Por ejemplo, este elemento te llevaría a la página web de freeCodeCamp en Español:

<a href="https://www.freecodecamp.org/espanol/">freeCodeCamp</a>
  • El atributo href nos permite especificar el destino del enlace. Su valor es el destino del enlace.
  • El texto que escribimos entre las etiquetas <a></a> es el texto que verá el usuario. En este caso, el texto es freeCodeCamp.

También puedes llevar a los usuarios a otra página de tu sitio web:

<a href="about.html">About Me</a>

Y si asignas el atributo id a un elemento HTML, puedes crear un enlace para llevar al usuario hasta ese elemento:

<a href="#titulo-principal">Ir al Título Principal</a>

En este ejemplo, el enlace llevaría al usuario hasta el elemento con id titulo-principal.

💡 Dato: el elemento <a> es distinto al elemento <link>. El elemento <link> se usa para especificar la relación entre el archivo HTML y una fuente externa como un archivo CSS.

Comentarios

HTML también nos permite escribir comentarios. Los comentarios son muy útiles para agregar notas que nosotros y otros desarrolladores pueden leer al ver el archivo. Son muy útiles para explicar y entender la estructura de la página y saber qué tareas están pendientes:

<!-- Cambiar la estructura de esta parte -->

💡 Dato: Los comentarios no son parte del código ni del resultado final. Son útiles para los desarrolladores que trabajan con el archivo HTML.

Listas

En HTML puedes crear listas ordenadas y listas no ordenadas con las etiquetas <ol> y <ul>, respectivamente.

Aquí tenemos un ejemplo de cada tipo de lista:

<!-- Lista Ordenada -->
<ol>
  <li>Azul</li>
  <li>Verde</li>
  <li>Negro</li>
</ol>
image-32
<!-- Lista No Ordenada -->
<ul>
  <li>Azul</li>
  <li>Verde</li>
  <li>Negro</li>
</ul>
image-31

💡 Tip: La diferencia entre ambos tipos de listas es que los elementos de las listas ordenadas se muestran con una numeración específica mientras que los elementos de las listas no ordenadas muestran viñetas sin numeración.

Imágenes

Para crear una imagen en HTML debemos usar la etiqueta <img>. Este elemento no requiere una etiqueta de cierre, solo la de apertura.

Por ejemplo:

<img src="https://bit.ly/fcc-relaxing-cat">
  • En la etiqueta de apertura especificamos la ubicación de la imagen en internet (o en nuestro dispositivo) con el atributo src.

También deberías incluir el atributo alt en todas las imágenes de tu página web para que se dé un texto alternativo en caso de que la imagen no se descargue correctamente o en caso de que el usuario use un lector de pantalla.

Por ejemplo:

<img src="https://bit.ly/fcc-relaxing-cat" alt="Un lindo gato naranja recostado sobre su espalda.">

¡Buen trabajo! Ya sabes los fundamentos básicos de HTML.

Ahora veamos CSS.

🔸 Introducción a CSS

Una vez que tenemos la estructura de nuestra página web en HTML, podemos comenzar a aplicar estilos a los elementos con CSS.

CSS es un lenguaje basado en reglas. Estas reglas nos permiten especificar cómo se va a presentar el elemento en la página web a partir de selectores, propiedades y sus valores.

Tres Opciones

Hay tres opciones para aplicar estilos CSS a tus elementos HTML:

  • Estilos en línea:
    Puedes especificar un estilo directamente en la etiqueta de apertura del elemento que quieres personalizar con el atributo style.

Por ejemplo:

<h1 style="color: blue">Mi página web</h1>

El valor del atributo style es la propiedad color y su valor correspondiente blue.

💡 Dato: la propiedad y su valor deben estar separados por dos puntos y un espacio.

  • Elemento <style>:
    Si deseas aplicar el mismo estilo a varios elementos, puedes hacerlo en el elemento <style>, donde puedes escribir tus reglas usando selectores CSS.

Por ejemplo:

<head>
  <title>Mi página web</title>
  <style>
    h1 {
      color: blue
    }
  </style>
</head>

💡 Dato: el elemento <style> debería estar dentro del elemento <head>.

  • Archivo CSS:
    La opción que normalmente usamos es escribir nuestras reglas en un archivo CSS y luego vincular este archivo al archivo HTML. Para ello, debemos incluir un elemento <link> en <head> y asignar la ubicación del archivo como el valor de href.
<link href="style.css" rel="stylesheet">

De esta forma se aplicarán los estilos del archivo CSS a los elementos correspondientes en HTML.

💡 Tip: si el archivo CSS está en la misma carpeta que el archivo HTML, escribimos el nombre del archivo CSS. Si está dentro de una carpeta, hay que especificar su ubicación. Por ejemplo: css/style.css.

Reglas

Este es un ejemplo de una regla en CSS:

h1 {
  color: blue;
  font-size: 15px;
  font-weight: bold;
}

Veamos su estructura principal:

  • Primero, escribimos un selector (en este caso, h1). Los selectores nos permiten seleccionar los elementos a los cuales se les aplicará el estilo.
  • Luego, dentro de las llaves, especificamos las propiedades que queremos asignar a los elementos seleccionados.
  • Las propiedades deben estar separadas de sus valores por dos puntos y un espacio.
  • Al final de cada línea, incluimos un punto y coma.

💡 Tip: en CSS se recomienda indentar el contenido de la regla con 2 espacios.

Selectores en CSS

Hay varios tipos de selectores en CSS que nos permiten seleccionar distintos tipos de elementos basados en distintos criterios.

Los selectores más comunes son:

  • Selector de tipo:
    Nos permite seleccionar todos los elementos de un tipo específico.

Ejemplo:

h1 {
  color: blue;
  font-size: 15px;
  font-weight: bold;
}

Con este selector estamos seleccionando todos los elementos de tipo h1.

  • Selector de clase:
    Nos permite seleccionar todos los elementos que tienen una clase específica asignada. Podemos asignar la misma clase a varios elementos. En este caso, escribimos un punto antes del nombre de la clase en la regla CSS.
.texto-verde {
  color: green;
}

Con este selector estamos seleccionando todos los elementos que tienen la clase texto-verde.

  • Selector de id:
    Nos permite seleccionar el elemento con un id específico asignado. Cada id debe ser único y solo debería ser aplicado a un elemento por página web. En este caso, escribimos un símbolo de numeral # antes del nombre del id en la regla CSS.
#titulo-principal {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

Con este selector estamos seleccionando todos los elementos que tienen el id titulo-principal.

📌 Curso en YouTube

¡Genial! Ahora que ya sabes lo básico de HTML y CSS, te invitamos a ver nuestro curso gratuito de 5+ horas con más contenido, detalles, datos y ejemplos explicados paso a paso:

Curso creado por Estefania Cassingena Navone (@EstefaniaCassN).

Contenido del Curso

Los temas están enfocados en conceptos específicos pero aquí los he dividido en categorías principales para darte una idea general del contenido.

HTML

  • Introducción a HTML y CSS.
  • Herramientas de Desarrollo de Google Chrome.
  • Editores de Código.
  • Crear archivo HTML y declarar DOCTYPE.
  • Elementos y etiquetas en HTML.
  • Encabezados y Párrafos.
  • Documentación Web.
  • Indentación.
  • Imágenes.
  • Enlaces.
  • Listas ordenadas y no ordenadas.
  • Formato de texto.
  • Formularios.
  • Botones de Radio y casillas de verificación.
  • Elementos <div>
  • Pie de página.
  • Elemento <head>.

CSS

  • Introducción a CSS.
  • Estilos en línea, el bloque <style> y archivos CSS.
  • Clases y ids.
  • Formato de texto (tamaño, tipo de letra, respaldos).
  • Google Fonts.
  • Imágenes.
  • Padding y Margin.
  • Selectores de atributo.
  • Unidades absolutas y relativas.
  • Prioridad de estilos.
  • Colores HEX y RGB en CSS.
  • Variables CSS.

Esperamos que te guste el curso y que te ayude a iniciarte en el mundo del desarrollo web.

Continúa aprendiendo con nuestros cursos en YouTube: